/* BASIC *//* BASIC */
/* ------------------------------- */

:root {
  --body-bg-color: #FFFFFF;
  --body-bg-nightmode: #313131;
  --body-bg-color-nightmode: #313131;

  --bg-bg-color: #f2f2f2;
  --bg-bg-color-nightmode: #000000;

  --side-menu-icon-active: #000000;
  --side-menu-icon-active-nightmode: #03ffe1;

  --side-menu-icon-inactive: #909090;
  --side-menu-icon-inactive-nightmode: #FFFFFF;

  --link-color: #909090;
  --link-color-nightmode: #03ffe1;

  --username-color: #000000;
  --username-color-nightmode: #FFFFFF;

  --top-menu-icons: #000000;
  --top-menu-icons-nightmode: #FFFFFF;
  
  --header-bg-color: #f2f2f2;
  --header-bg-color-nightmode: #000000;

  --body-text-color: #000;
  --body-text-color-nightmode: #FFF;

  --cs-mint: #03ffe1;

  /*--body-font-family: Poppins, Helvetica, sans-serif;*/
  /* --body-font-family: Oswald, Helvetica, sans-serif; */
  --body-font-family: 'Roboto', Helvetica, sans-serif;

  /* Bootstrap CSS variable overrides */
  --bs-body-bg: var(--body-bg-color);
  --bs-card-bg: var(--body-bg-color);
}

body.night-mode {
  --bs-body-bg: var(--body-bg-nightmode);
  --bs-card-bg: var(--body-bg-color-nightmode);
}

/* SCHEDULE SYSTEM STYLING */
/* ------------------------------- */

/* Schedule toggle wrapper */
#schedule-toggle-wrapper {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: #2d3748;
  border-color: #4a5568;
}

/* Schedule date input */
.js_publisher-schedule-date {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  color: #495057;
}

body.night-mode .js_publisher-schedule-date {
  background-color: #4a5568;
  border-color: #718096;
  color: #e2e8f0;
}

/* Schedule meta styling */
.publisher-meta[data-meta="schedule"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

body.night-mode .publisher-meta[data-meta="schedule"] {
  background-color: #2d3748;
}

.publisher-meta[data-meta="schedule"] .form-label {
  font-weight: 600;
  margin-bottom: 0;
  color: #495057;
}

body.night-mode .publisher-meta[data-meta="schedule"] .form-label {
  color: #e2e8f0;
}

.publisher-meta[data-meta="schedule"] .form-text {
  font-size: 12px;
  color: #6c757d;
  margin-top: 2px;
}

body.night-mode .publisher-meta[data-meta="schedule"] .form-text {
  color: #a0aec0;
}

/* Schedule toggle switch */
.publisher-meta[data-meta="schedule"] .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.publisher-meta[data-meta="schedule"] .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.publisher-meta[data-meta="schedule"] .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.publisher-meta[data-meta="schedule"] .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.publisher-meta[data-meta="schedule"] input:checked + .slider {
  background-color: #5e72e4;
}

.publisher-meta[data-meta="schedule"] input:checked + .slider:before {
  transform: translateX(26px);
}

/* Schedule tool tab styling */
.publisher-tools-tab[data-tab="schedule"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.publisher-tools-tab[data-tab="schedule"]:hover {
  background-color: #f8f9fa;
}

body.night-mode .publisher-tools-tab[data-tab="schedule"]:hover {
  background-color: #2d3748;
}

.publisher-tools-tab[data-tab="schedule"].activated {
  background-color: #5e72e4;
  color: white;
}

.publisher-tools-tab[data-tab="schedule"].activated .main-icon {
  color: white !important;
  fill: white !important;
}

/* ================== */

/* MAIN */
/* ------------------------------- */

/* main-icons */
.main-icon,
.main-icon *,
.x-form-tools {
  color: var(--top-menu-icons) !important;
  fill: var(--top-menu-icons) !important;
}

body.night-mode .main-icon,
body.night-mode .main-icon *,
body.night-mode .x-form-tools {
  color: var(--top-menu-icons-nightmode) !important;
  fill: var(--top-menu-icons-nightmode) !important;
}

/* Networking Icons
.main-icon2,
.main-icon2 *,
.x-form-tools2 {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

body.night-mode .main-icon2,
body.night-mode .main-icon2 *,
body.night-mode .x-form-tools2 {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
} */

/* header-icons */
.header-icon,
.header-icon * {
  color: var(--top-menu-icons) !important;
  fill: var(--top-menu-icons) !important;
}

body.night-mode .header-icon,
body.night-mode .header-icon * {
  color: var(--top-menu-icons-nightmode) !important;
  fill: var(--top-menu-icons-nightmode) !important;
}

.alert {
  border-radius: 0;
}

.card {
  border-radius: 0;
}

.card-header,
.card-footer,
.card-footer:last-child {
  border-radius: 0 !important;
}

/* Add border-radius to card headers in blogs section */
.card .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
}

.card-footer.text-end {
  background-color: transparent !important;
}

.dropdown-menu {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-widget.dropdown-search {
  border-radius: 0;
}

.side-nav>li.active>a {
  border-radius: 0;
}

/* ================== */

/* IMPROVED PHOTOS & ALBUMS STYLING */
/* ------------------------------- */

/* Profile Photos Section */
.panel-photos .card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

body.night-mode .panel-photos .card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

  .panel-photos .card-body {
    padding: 20px !important;
  }

/* Photos Grid Improvements */
.panel-photos div[class^="col-"],
.panel-photos div[class*=" col-"] {
  padding: 3px !important;
  margin-bottom: 6px;
}

.pg_photo {
  border-radius: 0 !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: none;
}

.pg_photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .pg_photo {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

body.night-mode .pg_photo:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

/* Photo Action Buttons */
.pg_photo-delete-btn .btn-close {
  background: rgba(220, 53, 69, 0.9);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.pg_photo-delete-btn .btn-close::before {
  content: '×';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.pg_photo-delete-btn .btn-close:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
}

.pg_photo-pin-btn {
  background: rgba(0, 0, 0, 0.7) !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  transition: all 0.3s ease;
}

.pg_photo-pin-btn:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  transform: scale(1.05);
}

.pg_photo-pin-btn.pinned {
  background: rgba(3, 255, 225, 0.9) !important;
  color: #000 !important;
}

.pg_photo-pin-btn.pinned:hover {
  background: rgba(3, 255, 225, 1) !important;
}

/* Albums Section */
.panel-photos .card .card-header.with-icon.with-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 20px 0 20px !important;
}

body.night-mode .panel-photos .card .card-header.with-icon.with-nav {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Album Cards Improvements */
.album-card {
  position: relative;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  padding: 0 !important;
}

.album-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .album-card {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

body.night-mode .album-card:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

.album-cover {
  display: block;
  width: 100%;
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative;
  transition: all 0.3s ease;
}

.album-cover:hover {
  transform: scale(1.02);
}

/* Album details overlay */
.album-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 20px 15px 15px 15px;
  transform: translateY(0);
  transition: all 0.3s ease;
  z-index: 2;
}

.album-card:hover .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

body.night-mode .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

body.night-mode .album-card:hover .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
}

.album-details a {
  color: white !important;
  font-weight: 600;
  font-size: 1.1em;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.album-details a:hover {
  color: white !important;
  text-decoration: none;
}

body.night-mode .album-details a:hover {
  color: white !important;
}

.album-details div {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.9em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.album-details .fa {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}



/* Responsive adjustments for overlay */
@media (max-width: 768px) {
  .album-cover {
    height: 180px;
  }
  
  .album-details {
    padding: 15px 12px 12px 12px;
  }
  
  .album-details a {
    font-size: 1em;
  }
  
  .album-details div {
    font-size: 0.85em;
  }
}

@media (max-width: 576px) {
  .album-cover {
    height: 160px;
  }
  
  .album-details {
    padding: 12px 10px 10px 10px;
  }
  
  .album-details a {
    font-size: 0.95em;
  }
  
  .album-details div {
    font-size: 0.8em;
  }
}

/* Navigation Tabs */
.panel-photos .nav-tabs,
.col-12 .card .nav-tabs {
  border-bottom: none;
  margin-bottom: 0;
}

.panel-photos .nav-tabs .nav-link,
.col-12 .card .nav-tabs .nav-link {
  border: none;
  color: #6c757d;
  font-weight: 500;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.panel-photos .nav-tabs .nav-link:hover,
.col-12 .card .nav-tabs .nav-link:hover {
  color: #007bff;
  background: rgba(0, 123, 255, 0.05);
}

.panel-photos .nav-tabs .nav-link.active,
.col-12 .card .nav-tabs .nav-link.active {
  color: white !important;
  background: transparent !important;
  border-bottom: 2px solid white;
}

body.night-mode .panel-photos .nav-tabs .nav-link,
body.night-mode .col-12 .card .nav-tabs .nav-link {
  color: #adb5bd;
}

body.night-mode .panel-photos .nav-tabs .nav-link:hover,
body.night-mode .col-12 .card .nav-tabs .nav-link:hover {
  color: #03ffe1;
  background: rgba(3, 255, 225, 0.05);
}

body.night-mode .panel-photos .nav-tabs .nav-link.active,
body.night-mode .col-12 .card .nav-tabs .nav-link.active {
  color: white !important;
  border-bottom-color: white;
}

/* Empty State */
.panel-photos .text-center.text-muted {
  padding: 40px 20px;
  font-size: 16px;
  color: #6c757d;
}

body.night-mode .panel-photos .text-center.text-muted {
  color: #adb5bd;
}

/* See More Button */
.panel-photos .see-more {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  margin-top: 20px !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.panel-photos .see-more:hover {
  transform: translateY(-1px);
}

body.night-mode .panel-photos .see-more {
  border-color: rgba(255, 255, 255, 0.1);
}

body.night-mode .panel-photos .see-more:hover {
  /* Keep existing border color for night mode */
}

/* Responsive Improvements */
@media (max-width: 768px) {
  .panel-photos div[class^="col-"],
  .panel-photos div[class*=" col-"] {
    padding: 2px !important;
  }
  
  .panel-photos .card-body {
    padding: 15px !important;
  }
}

@media (max-width: 576px) {
  .pg_photo {
    border-radius: 0 !important;
  }
}

/* Additional Grid Improvements */
.panel-photos .row {
  margin: 0 -3px;
}

.panel-photos .row > [class*="col-"] {
  padding-left: 3px;
  padding-right: 3px;
}

/* Better spacing for albums grid */
.panel-photos .row .album-card {
  margin-bottom: 20px;
}

/* Improved photo loading states */
.pg_photo {
  position: relative;
  overflow: hidden;
}

/* Enhanced album cover hover effects */
.album-cover {
  position: relative;
}

.album-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-cover:hover::after {
  opacity: 1;
}

body.night-mode .album-cover::after {
  background: rgba(255, 255, 255, 0.1);
}


/* HEADER */
/* ------------------------------- */

.main-header {
  background: var(--header-bg-color);
  color: var(--link-color)
}

.main-header .search-wrapper .form-control {
  border-radius: 0;
  color: #000;
}

.navbar-wrapper .user-menu>img {
  border-radius: 7px;
}

.dropdown-item img {
  border-radius: 7px;
}

/* ================== */


/* FOOTER */
/* ------------------------------- */

.mini-footer .copyrights {
  border-bottom-color: #d9d9d9;
}

/* ================== */


/* LANDING PAGE */
/* ------------------------------- */

.landing-left {
  /*background: #032b25;*/
  background-position: center;
  background-image: url(../images/landing/welcome.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.landing-intro {
  visibility: hidden !important;
}

@media (min-width: 992px) {
  .landing-intro {
    padding-top: 300px;
  }
}

.landing-intro .logo-wrapper {
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2.8rem;
}

.landing-intro .description-wrapper {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 100;
  font-size: 2.4rem;
}

@media (min-width: 768px) {
  .landing-intro .logo-wrapper {
    font-size: 4rem;
  }

  .landing-intro .description-wrapper {
    font-size: 3.2rem;
  }
}

.landing-right {
  background: #000;
  color: #666;
}

.card-register {
  background: #000 !important;
  color: #666 !important;
}

.card-register .form-control {
  background: #000 !important;
  ;
  border: 0 none !important;
  ;
  border-bottom: 1px solid #72879a !important;
  ;
  border-radius: 0 !important;
  ;
  color: #72879a !important;
  ;
  padding: 20px 0 !important;
  ;
}

.card-register .form-control::placeholder {
  color: #72879a !important;
  ;
}

.card-register .form-control::-webkit-input-placeholder {
  color: #72879a !important;
  ;
}

.card-register .form-control::-moz-placeholder {
  color: #72879a !important;
  ;
}

.card-register .hr-heading-text:before,
.card-register .hr-heading-text:after {
  background: #72879a !important;
  ;
}

/* ================== */


/* LEFT PANEL */
/* ------------------------------- */

.main-left-panel {
  background: var(--header-bg-color);
  /*padding-top: 20px;*/
}

body.night-mode .main-left-panel {
  background: var(--header-bg-color-nightmode);
}

.main-side-nav-card {
  background: var(--header-bg-color) !important;
  color: var(--body-text-color) !important;
}

body.night-mode .main-side-nav-card {
  background: var(--header-bg-color-nightmode) !important;
}

.main-side-nav .static,
.main-side-nav a {
  margin-bottom: 10px;
}

body.night-mode .main-side-nav .static,
body.night-mode .main-side-nav a {
  color: var(--body-text-color-nightmode);
}

/* Mobile: Center nav but keep text left-aligned */
@media screen and (max-width: 767px) {
  .main-side-nav-card ul {
    width: fit-content;
    margin: 0 auto;
  }

  .main-side-nav .static,
  .main-side-nav a {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .main-side-nav .static,
  .main-side-nav a {
    width: 100%;
    padding: 10px 20px;
    text-align: center;
  }
}

@media screen and (min-width: 992px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 10px;
  }
}

/*@media screen and (min-width: 1400px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 20px;
  }
}*/

.main-side-nav a[data-bs-toggle=collapse]:after {
  display: none;
}

.main-side-nav a:hover,
.main-side-nav>li.active>a {
  /*background-color: var(--card-dark-hover);*/
  border-radius: 0 !important;
  color: var(--body-text-color-);
}

body.night-mode .main-side-nav a:hover,
body.night-mode .main-side-nav>li.active>a {
  color: var(--body-text-color-nightmode);
}


.main-side-nav-card .main-icon {
  width: 32px;
  height: 32px;
}

@media screen and (min-width: 1400px) {
  .main-side-nav-card .main-icon {
    width: 32px;
    height: 32px;
  }
}

/* Default color for all icons */
.main-side-nav-card .main-icon,
.main-side-nav-card .main-icon * {
  color: var(--side-menu-icon-inactive) !important; 
  fill: var(--side-menu-icon-inactive) !important; 
}

/* Active state color */
.main-side-nav > li.active > a .main-icon,
.main-side-nav > li.active > a .main-icon * {
  color: var(--side-menu-icon-active) !important; 
  fill: var(--side-menu-icon-active) !important; 
}

body.night-mode .main-side-nav-card .main-icon,
body.night-mode .main-side-nav-card .main-icon * {
  color: var(--side-menu-icon-inactive-nightmode) !important;
  fill: var(--side-menu-icon-inactive-nightmode) !important; 
}

/* Active state color */
body.night-mode .main-side-nav > li.active > a .main-icon,
body.night-mode .main-side-nav > li.active > a .main-icon * {
  color: var(--side-menu-icon-active-nightmode) !important; 
  fill: var(--side-menu-icon-active-nightmode) !important; 
}



.main-side-nav .user-image {
  width: fit-content;
  padding: 0;
  /*margin-top: -30px;*/
  /*margin-right: -1.375rem;*/
  /*margin-left: -1.375rem;*/
  text-align: center;
}

/*@media screen and (min-width: 1400px) and (max-width: 1500px) {
  .main-side-nav .user-image {
    margin-right: -0.950rem;
    margin-left: -0.950rem;
  }
}*/

.main-side-nav .user-image img {
  width: 50%;
  height: auto;
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    width: 100%;
  }
}

/* ================== */


/* CENTER PANEL */
/* ------------------------------- */

.col-lg-8.main-center-panel,
.col-lg-12.main-center-panel {
  padding-top: 20px;
  background: var(--bg-bg-color);
  position: relative;
  z-index: 1;
}

body.night-mode .col-lg-8.main-center-panel,
body.night-mode .col-lg-12.main-center-panel {
  background: var(--bg-bg-color-nightmode);
}

/* Hide modal post close X */
.modal-post-close {
  display: none !important;
}

/* JS Posts Stream Grid */
.js_posts_stream.grid-view,
.js_posts_stream,
.grid-view {
  /* padding-top: 33px; */
  /* border-radius: 12px; */
  /* background-color: #fff !important; */
  /* box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1); */
}

/* Post background styling */
.post {
  background: var(--header-bg-color) !important;
}

body.night-mode .post {
  background: var(--header-bg-color-nightmode) !important;
}

/* Fix white gap at bottom of posts in list view */
.js_posts_stream .post-body {
  margin-bottom: 0 !important;
}

/* Style the gap area of posts with header color using padding */
.js_posts_stream .post {
  background-color: var(--header-bg-color) !important;
  margin-bottom: 0 !important;
  padding-bottom: 20px !important; /* Use padding instead of margin */
}

/* Remove padding-bottom for grid mode and use body bg color */
.js_posts_stream.grid-view .post {
  padding-bottom: 0 !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode .js_posts_stream.grid-view .post {
  background-color: var(--body-bg-nightmode) !important;
}

/* List mode: Make .post same height as .post-body for text-only posts */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  padding-bottom: 0 !important;
  background-color: var(--body-bg-color) !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)),
body.night-mode .js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  background-color: var(--body-bg-nightmode) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Make post-body fill the post for text-only posts */
/* Exclude article posts with cover images */
.js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)) .post-body,
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-body {
  flex: 1;
}

/* Video posts - ensure post height matches video container exactly */
.js_posts_stream.grid-view .grid-item:has(.js_videojs) .post,
.js_posts_stream.grid-view .grid-item:has(.youtube-player) .post {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Optimize spacing for image-only posts (no text content) - Grid mode only */
/* Only apply negative margins to posts that have actual images/media (exclude URL previews with .post-media) */
/* Article posts with cover images should be treated as image posts */
.js_posts_stream.grid-view .post-body:has(.pg_wrapper),
.js_posts_stream.grid-view .post-body:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image),
.js_posts_stream.grid-view .post-body:has(.post-product-wrapper),
.js_posts_stream.grid-view .post-body:has(.youtube-player),
.js_posts_stream.grid-view .post-body:has(.js_videojs) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure video container fills post-body exactly */
.js_posts_stream.grid-view .post-body:has(.youtube-player) .youtube-player,
.js_posts_stream.grid-view .post-body:has(.js_videojs) .js_videojs {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Proper spacing for text-only posts in grid mode (including URL preview posts) */
.js_posts_stream.grid-view .post-body:has(.post-media),
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 16px 12px 12px 12px !important;
}

/* Increased padding-top for text-only posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene),
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) {
  padding-top: 20px !important;
}

/* Add padding-top for OG image posts to position content below header pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image) {
  padding-top: 50px !important;
}

/* Increased padding-top for OG image posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
  padding-top: 65px !important;
}

/* Reduce padding-top for OG image posts on mobile */
@media (max-width: 768px) {
  .js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image) {
    padding-top: 15px !important;
  }
  
  .js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
    padding-top: 25px !important;
  }
}

/* Better styling for text content in text-only posts (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-text,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
}

/* Better styling for links in text-only posts (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-text a,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text a {
  color: var(--primary-color) !important;
  word-break: break-word !important;
}

/* Styling for colored pattern posts in text-only mode (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-colored,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-colored {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  min-height: 150px !important;
  padding: 16px !important;
}

/* Ensure text-only posts have minimum height for better appearance */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.grid-view .post:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.grid-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) {
  min-height: 180px !important;
}

/* Add margin to top of post-replace for text-only posts to bring text into view */
/* Exclude article posts with cover images */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)) .post-replace,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-replace {
  margin-top: 40px !important;
}

/* Increased margin-top for text-only posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene) .post-replace,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Increased margin-top for OG image posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Left-align post-actions for text-only posts in grid mode */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-actions,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-actions {
  left: 12px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Hide post-replace text for posts with images/videos - text should only appear in pill */
.grid-view .grid-item:has(.pg_wrapper) .post-replace .post-text,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.grid-view .grid-item:has(.post-product-wrapper) .post-replace .post-text,
.grid-view .grid-item:has(.youtube-player) .post-replace .post-text,
.grid-view .grid-item:has(.js_videojs) .post-replace .post-text,
.grid-view .post:has(.pg_wrapper) .post-replace .post-text,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.grid-view .post:has(.post-product-wrapper) .post-replace .post-text,
.grid-view .post:has(.youtube-player) .post-replace .post-text,
.grid-view .post:has(.js_videojs) .post-replace .post-text,
.list-view .post:has(.pg_wrapper) .post-replace .post-text,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.list-view .post:has(.post-product-wrapper) .post-replace .post-text,
.list-view .post:has(.youtube-player) .post-replace .post-text,
.list-view .post:has(.js_videojs) .post-replace .post-text {
  display: none !important;
}

/* Hide post-text-normal-for-images in grid view (only show pill) */
.grid-view .grid-item:has(.pg_wrapper) .post-text-normal-for-images,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-text-normal-for-images,
.grid-view .grid-item:has(.post-product-wrapper) .post-text-normal-for-images,
.grid-view .grid-item:has(.youtube-player) .post-text-normal-for-images,
.grid-view .grid-item:has(.js_videojs) .post-text-normal-for-images,
.grid-view .post:has(.pg_wrapper) .post-text-normal-for-images,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-normal-for-images,
.grid-view .post:has(.post-product-wrapper) .post-text-normal-for-images,
.grid-view .post:has(.youtube-player) .post-text-normal-for-images,
.grid-view .post:has(.js_videojs) .post-text-normal-for-images {
  display: none !important;
}

/* Text pill for posts with both images and text - Grid mode only */
.grid-view .post-text-pill {
  position: absolute;
  bottom: 65px; /* Above the action buttons */
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  z-index: 5;
  max-height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* Improve touch responsiveness on mobile */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-text-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.grid-view .grid-item:has(.post-product-wrapper) .post-text-pill,
.grid-view .grid-item:has(.youtube-player) .post-text-pill,
.grid-view .grid-item:has(.js_videojs) .post-text-pill,
.grid-view .post:has(.pg_wrapper) .post-text-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.grid-view .post:has(.post-product-wrapper) .post-text-pill,
.grid-view .post:has(.youtube-player) .post-text-pill,
.grid-view .post:has(.js_videojs) .post-text-pill {
  opacity: 0;
  visibility: hidden;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-text-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.grid-view .grid-item:has(.youtube-player):hover .post-text-pill,
.grid-view .grid-item:has(.js_videojs):hover .post-text-pill,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-text-pill,
.grid-view .post:has(.pg_wrapper):hover .post-text-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.grid-view .post:has(.post-product-wrapper):hover .post-text-pill,
.grid-view .post-text-pill.expanded {
  opacity: 1;
  visibility: visible;
}

.grid-view .post-text-pill-content {
  color: #333 !important;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
}

/* Text pill expandable functionality - Grid mode only */
.grid-view .post-text-pill.expanded {
  max-height: 200px;
  overflow-y: auto;
}

.grid-view .post-text-pill.expanded .text-preview {
  display: none;
}

.grid-view .post-text-pill.expanded .text-full {
  display: block !important;
}

.grid-view .text-expand-indicator {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #666;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  display: none; /* Hide the indicator */
}

.grid-view .post-text-pill.expanded .text-expand-indicator {
  display: none;
}

/* Night mode for text pill - Grid mode only */
body.night-mode .grid-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

body.night-mode .grid-view .post-text-pill-content {
  color: #fff !important;
}

body.night-mode .grid-view .text-expand-indicator {
  color: #ccc;
  background: rgba(30, 30, 30, 0.8);
}

body.night-mode .js_posts_stream .post {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* List Mode: Apply all grid mode styling - like-for-like copy */

/* Video posts - ensure post height matches video container exactly */
.js_posts_stream.list-view .post:has(.js_videojs),
.js_posts_stream.list-view .post:has(.youtube-player) {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Optimize spacing for image-only posts (no text content) - List mode */
/* Article posts with cover images should be treated as image posts */
.js_posts_stream.list-view .post-body:has(.pg_wrapper),
.js_posts_stream.list-view .post-body:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image),
.js_posts_stream.list-view .post-body:has(.post-product-wrapper),
.js_posts_stream.list-view .post-body:has(.youtube-player),
.js_posts_stream.list-view .post-body:has(.js_videojs) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Ensure video container fills post-body exactly */
.js_posts_stream.list-view .post-body:has(.youtube-player) .youtube-player,
.js_posts_stream.list-view .post-body:has(.js_videojs) .js_videojs {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Proper spacing for text-only posts in list mode (including URL preview posts) - Same as grid mode */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 16px 12px 12px 12px !important; /* Same padding as grid mode */
  position: relative !important; /* Make post-body a positioning context for post-actions */
}

/* Increased padding-top for text-only posts with scene name in username pill */
/* Exclude article posts with cover images */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene),
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) {
  padding-top: 20px !important;
}

/* Add padding-top for OG image posts to position content below header pill (list-view) */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image) {
  padding-top: 50px !important;
}

/* Increased padding-top for OG image posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
  padding-top: 65px !important;
}

/* Reduce padding-top for OG image posts on mobile (list-view) */
@media (max-width: 768px) {
  .js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image) {
    padding-top: 15px !important;
  }
  
  .js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
    padding-top: 25px !important;
  }
}

/* Better styling for text content in text-only posts (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-text,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
}

/* Better styling for links in text-only posts (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-text a,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text a {
  color: var(--primary-color) !important;
  word-break: break-word !important;
}

/* Styling for colored pattern posts in text-only mode (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-colored,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-colored {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  min-height: 150px !important;
  padding: 16px !important;
}

/* Ensure text-only posts have minimum height for better appearance */
.js_posts_stream.list-view .post:has(.post-media),
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) {
  min-height: 180px !important;
}

/* Add margin to top of post-replace for text-only posts to bring text into view */
.js_posts_stream.list-view .post-body:has(.post-media) .post-replace,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-replace {
  margin-top: 40px !important;
}

/* Increased margin-top for text-only posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene) .post-replace,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Increased margin-top for OG image posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Text-only posts in list mode: post-actions still absolutely positioned but adjusted (same as grid mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-actions,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-actions {
  left: 12px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  /* Keep absolute positioning but ensure it's relative to post-body, not post */
  position: absolute !important;
  bottom: 12px !important;
}

/* Text pill for posts with both images and text - List mode */
.list-view .post-text-pill {
  position: absolute;
  bottom: 65px; /* Above the action buttons */
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  z-index: 5;
  max-height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* Improve touch responsiveness on mobile */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-text-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.list-view .post:has(.post-product-wrapper) .post-text-pill,
.list-view .post:has(.youtube-player) .post-text-pill,
.list-view .post:has(.js_videojs) .post-text-pill {
  opacity: 0;
  visibility: hidden;
}

.list-view .post:has(.pg_wrapper):hover .post-text-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.list-view .post:has(.youtube-player):hover .post-text-pill,
.list-view .post:has(.js_videojs):hover .post-text-pill,
.list-view .post:has(.post-product-wrapper):hover .post-text-pill,
.list-view .post-text-pill.expanded {
  opacity: 1;
  visibility: visible;
}

.list-view .post-text-pill-content {
  color: #333 !important;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
}

/* Text pill expandable functionality - List mode */
.list-view .post-text-pill.expanded {
  max-height: 200px;
  overflow-y: auto;
}

.list-view .post-text-pill.expanded .text-preview {
  display: none;
}

.list-view .post-text-pill.expanded .text-full {
  display: block !important;
}

.list-view .text-expand-indicator {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #666;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  display: none; /* Hide the indicator */
}

.list-view .post-text-pill.expanded .text-expand-indicator {
  display: none;
}

/* Night mode for text pill - List mode */
body.night-mode .list-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

body.night-mode .list-view .post-text-pill-content {
  color: #fff !important;
}

body.night-mode .list-view .text-expand-indicator {
  color: #ccc;
  background: rgba(30, 30, 30, 0.8);
}

/* Hide normal text for images in list mode (use text pill instead) */
.list-view .post-text-normal-for-images {
  display: none !important;
}

.grid-view .post-text-normal-for-images {
  display: none !important;
}

/* List Mode: Modern Overlay Design */
.list-view .post {
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .list-view .post {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Hide original post header in list mode */
.list-view .post-header {
  display: none !important;
}

/* List Mode: Hide text labels for action buttons */
.list-view .reaction-btn-name,
.list-view .action-btn span {
  display: none !important;
}

/* List Mode: Adjust action button spacing - left aligned */
.list-view .post-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: auto;
}

.list-view .action-btn {
  flex: none;
  text-align: center;
  padding: 0;
  min-width: 44px;
  max-width: 44px;
}

/* List Mode: Override existing min-width rules */
.list-view .action-btn.reactions-wrapper,
.list-view .action-btn.js_comment,
.list-view .action-btn.share-btn {
  min-width: 44px !important;
  flex: none !important;
}

/* List Mode: Style action icons */
.list-view .action-icon {
  width: 20px !important;
  height: 20px !important;
}

.list-view .reaction-btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* List Mode: Ensure comment button is visible */
.list-view .js_comment {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.list-view .js_comment .action-icon {
  display: block !important;
  visibility: visible !important;
}

/* List Mode: Override x-hidden class for comment button */
.list-view .js_comment.x-hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Left Pill - User Info (List Mode) */
.list-view .post-header-pill-left {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  max-width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.list-view .post-header-pill-left .post-avatar {
  background: transparent !important;
}

/* Ensure all child elements are transparent except avatar picture */
.list-view .post-header-pill-left *:not(.post-avatar-picture) {
  background: transparent !important;
}

.list-view .post-header-pill-left .post-meta {
  background: transparent !important;
}

.list-view .post-header-pill-left .post-avatar a.post-avatar-picture {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 7px !important;
}

/* Additional specificity to override any conflicting rules */
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture,
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture:before,
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture:after {
  border-radius: 7px !important;
}

.list-view .post-header-pill-left .post-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0px 0px 0 0px !important;
}

.list-view .post-header-pill-left .post-meta .post-author {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.list-view .post-header-pill-left .post-meta .post-author a {
  color: #333;
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .post-author a:hover {
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.list-view .post-header-pill-left .post-meta .verified-badge .svg-container {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-view .post-header-pill-left .post-meta .verified-badge svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--primary-color);
  vertical-align: middle;
}

.list-view .post-header-pill-left .post-meta .post-time {
  font-size: 10px;
  color: #666;
  margin: 0;
  line-height: 1;
}

.list-view .post-header-pill-left .post-meta .post-time a {
  color: #666;
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .post-time a:hover {
  text-decoration: none;
}

/* Scene name in list view pill */
.list-view .post-header-pill-left .post-meta .post-scene {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  line-height: 1.2;
}

.list-view .post-header-pill-left .post-meta .post-scene span {
  color: #666;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-scene {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-scene span {
  color: #ccc;
}

/* Right Pill - Menu Options (List Mode) */
.list-view .post-header-pill-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  border-radius: 12px !important;
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-header-pill-right,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.list-view .post:has(.post-product-wrapper) .post-header-pill-right,
.list-view .post:has(.youtube-player) .post-header-pill-right,
.list-view .post:has(.js_videojs) .post-header-pill-right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .post-header-pill-right,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.list-view .post:has(.post-product-wrapper):hover .post-header-pill-right,
.list-view .post:has(.youtube-player):hover .post-header-pill-right,
.list-view .post:has(.js_videojs):hover .post-header-pill-right,
.list-view .post-header-pill-right .dropdown.open,
.list-view .post-header-pill-right:hover {
  opacity: 1;
  visibility: visible;
}

.list-view .post-header-pill-right .dropdown {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
}

/* Ensure all child elements are transparent */
.list-view .post-header-pill-right .dropdown * {
  background: transparent !important;
}

/* Hide expand icon in list view - it's now in the dropdown menu */
.list-view .post-header-pill-right .expand-post-icon {
  display: none !important;
}

.list-view .post-header-pill-right .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

.list-view .post-header-pill-right .fa-chevron-down::after {
  display: none !important;
}

/* YouTube controls pill styling (List Mode) */
.list-view .youtube-controls-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
  margin-right: 8px;
  z-index: 10;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s ease;
}

/* When moved below the header pill on small screens */
.list-view .youtube-controls-pill.youtube-controls-below {
  position: absolute !important;
  top: 36px !important;
  right: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

body.night-mode .list-view .youtube-controls-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  border: none !important;
}

.list-view .youtube-controls-pill * {
  background: transparent !important;
}

.list-view .youtube-controls-pill .youtube-caption-toggle,
.list-view .youtube-controls-pill .youtube-resize-toggle,
.list-view .youtube-controls-pill .video-caption-toggle,
.list-view .youtube-controls-pill .video-resize-toggle,
.list-view .youtube-controls-pill .image-caption-toggle,
.list-view .youtube-controls-pill .image-resize-toggle {
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.list-view .youtube-controls-pill .youtube-resize-toggle,
.list-view .youtube-controls-pill .video-resize-toggle,
.list-view .youtube-controls-pill .image-resize-toggle {
  margin-right: 0;
}

.list-view .youtube-controls-pill .youtube-caption-toggle:hover,
.list-view .youtube-controls-pill .youtube-resize-toggle:hover,
.list-view .youtube-controls-pill .video-caption-toggle:hover,
.list-view .youtube-controls-pill .video-resize-toggle:hover,
.list-view .youtube-controls-pill .image-caption-toggle:hover,
.list-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

.list-view .youtube-controls-pill .youtube-caption-toggle.active,
.list-view .youtube-controls-pill .youtube-resize-toggle.active,
.list-view .youtube-controls-pill .video-caption-toggle.active,
.list-view .youtube-controls-pill .video-resize-toggle.active,
.list-view .youtube-controls-pill .image-caption-toggle.active,
.list-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle {
  color: #ccc;
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle.active,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle.active,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

.list-view .post-header .dropdown {
  margin-left: auto;
}

.list-view .post-header .expand-post-icon {
  color: #666;
  font-size: 16px;
  margin-right: 8px;
}

.list-view .post-header .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

/* Bottom Action Circles - Left Aligned (List Mode) - Same as grid mode */
.list-view .post-actions {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 10 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-actions,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-actions,
.list-view .post:has(.post-product-wrapper) .post-actions,
.list-view .post:has(.youtube-player) .post-actions,
.list-view .post:has(.js_videojs) .post-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .post-actions,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.list-view .post:has(.post-product-wrapper):hover .post-actions,
.list-view .post:has(.youtube-player):hover .post-actions,
.list-view .post:has(.js_videojs):hover .post-actions,
.list-view .post:has(.reactions-wrapper.active) .post-actions {
  opacity: 1;
  visibility: visible;
}

/* Hide YouTube controls pill by default on media posts, show on hover */
.list-view .post:has(.pg_wrapper) .youtube-controls-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.list-view .post:has(.post-product-wrapper) .youtube-controls-pill,
.list-view .post:has(.youtube-player) .youtube-controls-pill,
.list-view .post:has(.js_videojs) .youtube-controls-pill {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .youtube-controls-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.list-view .post:has(.post-product-wrapper):hover .youtube-controls-pill,
.list-view .post:has(.youtube-player):hover .youtube-controls-pill,
.list-view .post:has(.js_videojs):hover .youtube-controls-pill {
  opacity: 1;
  visibility: visible;
}

/* Hide post-stats in list mode (numbers appear on buttons) */
.list-view .post-stats {
  visibility: hidden !important;
}

/* Remove post-stats height for image posts only in list mode to prevent layout shift */
.list-view .post:has(.pg_wrapper) .post-stats,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-stats,
.list-view .post:has(.post-product-wrapper) .post-stats,
.list-view .post:has(.youtube-player) .post-stats,
.list-view .post:has(.js_videojs) .post-stats {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.list-view .action-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Ensure all child elements are transparent except icons */
.list-view .action-btn *:not(.action-icon):not(.reaction-btn-icon):not(.reactions-container):not(.reactions-container *):not(.reaction-count):not(.comment-count):not(.share-count) {
  background: transparent !important;
}

.list-view .action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.list-view .action-btn .action-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

.list-view .action-btn .reaction-btn-icon {
  width: 20px;
  height: 20px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ensure inline-emoji inside reaction-btn-icon is properly sized */
.list-view .action-btn .reaction-btn-icon .inline-emoji {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.list-view .action-btn .reaction-btn-icon .inline-emoji .emoji,
.list-view .action-btn .reaction-btn-icon .inline-emoji img,
.list-view .action-btn .reaction-btn-icon .inline-emoji svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  position: static !important;
  object-fit: contain !important;
}

/* Reaction count badge */
.list-view .action-btn .reaction-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Comment count badge */
.list-view .action-btn .comment-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Share count badge */
.list-view .action-btn .share-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Night mode - ensure count badges maintain same styling */
body.night-mode .list-view .action-btn .reaction-count,
body.night-mode .list-view .action-btn .comment-count,
body.night-mode .list-view .action-btn .share-count {
  background: #03FFE1 !important;
  color: black !important;
}

/* List Mode: Fix reactions container positioning and styling */
.list-view .reactions-wrapper {
  position: relative !important; /* Ensure relative positioning for absolute children */
}

/* Always hide original reactions container in list mode - we use flyout instead */
.list-view .reactions-container {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.list-view .action-btn.reactions-wrapper .reactions-container,
.list-view .reactions-wrapper .reactions-container,
.list-view .reactions-wrapper:hover .reactions-container,
.list-view .reactions-wrapper.active .reactions-container,
.list-view .action-btn.reactions-wrapper:hover .reactions-container,
.list-view .action-btn.reactions-wrapper.active .reactions-container,
.list-view .reactions-container:hover,
.list-view .reactions-container[style*="background"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* List mode reactions flyout styling - row layout on desktop, grid on mobile */
#list-reactions-flyout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

#list-reactions-flyout .reactions_item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Fix emoji positioning inside reactions_item for list flyout */
#list-reactions-flyout .reactions_item .emoji {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

#list-reactions-flyout .reactions_item .emoji img,
#list-reactions-flyout .reactions_item .emoji svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

#list-reactions-flyout .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

body.night-mode #list-reactions-flyout .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile adjustments for list reactions flyout - 3x3 grid layout */
@media (max-width: 768px) {
  #list-reactions-flyout {
    /* CSS Grid will be set by JavaScript inline styles */
    display: grid !important;
  }
  
  #list-reactions-flyout .reactions_item {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    /* Remove flex properties when using grid */
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  
  #list-reactions-flyout .reactions_item .emoji img,
  #list-reactions-flyout .reactions_item .emoji svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

.list-view .reactions-container .reaction-item {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.list-view .reactions-container .reaction-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  transform: scale(1.1) !important;
}

body.night-mode .list-view .reactions-container .reaction-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.list-view .reactions-container .reaction-item img,
.list-view .reactions-container .reaction-item svg {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}

/* Night mode styling for list view */
body.night-mode .list-view .post-header-pill-left {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .list-view .post-header-pill-right .dropdown {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
}

/* Hide original dropdown menu in list mode when flyout is active */
.list-view .action-dropdown-menu.list-dropdown-hidden,
.list-view .dropdown-menu.action-dropdown-menu.list-dropdown-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Action dropdown menu styling for list view */
.list-view .action-dropdown-menu,
.list-view .dropdown-menu.action-dropdown-menu {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

/* List dropdown flyout styling */
#list-dropdown-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

/* Grid dropdown flyout styling */
#grid-dropdown-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

/* Reactions flyouts */
#list-reactions-flyout,
#grid-reactions-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

body.night-mode .list-view .action-dropdown-menu,
body.night-mode .list-view .dropdown-menu.action-dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-author {
  color: #fff;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-author a {
  color: #fff;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-time {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-time a {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-right .expand-post-icon,
body.night-mode .list-view .post-header-pill-right .fa-chevron-down {
  color: #ccc;
}

body.night-mode .list-view .action-btn {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .list-view .action-btn .action-icon {
  color: #fff;
}

body.night-mode .list-view .action-btn .reaction-btn-icon {
  color: #fff;
}

body.night-mode .list-view .reactions-container {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.night-mode .list-view .action-btn.reactions-wrapper .reactions-container {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.night-mode .list-view .reactions-wrapper:hover .reactions-container[style*="background"],
body.night-mode .list-view .reactions-wrapper.active .reactions-container[style*="background"],
body.night-mode .list-view .action-btn.reactions-wrapper:hover .reactions-container[style*="background"],
body.night-mode .list-view .action-btn.reactions-wrapper.active .reactions-container[style*="background"] {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* List mode: Post body and media styling */
.list-view .post-body {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.list-view .post-media,
.list-view .post-media-image .image,
.list-view .post-media-image>div,
.list-view .post-footer,
.list-view .post-media-image .source,
.list-view .post-product-wrapper,
.list-view .post-funding-meta .funding-description,
.list-view .post-job-meta .job-description {
  border-radius: 12px;
  padding: 0 !important;
  margin: 0 !important;
}

/* List mode: Ensure OG images are properly sized and not cut off */
.list-view .post-media .post-media-image {
  width: 100% !important;
  display: block !important;
}

.list-view .post-media .post-media-image .image {
  width: 100% !important;
  min-height: 200px !important; /* Bigger than grid mode for list view */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 12px !important; /* All corners rounded */
}

/* Article posts with cover images - make the inner div fill container */
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image > div {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* Override inline padding-top: 50% */
  aspect-ratio: 2 / 1 !important; /* Default 2:1 aspect ratio for articles */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Fix source badge size on article posts in list mode - prevent it from inheriting width/height */
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image .source {
  width: 20px !important;
  height: 20px !important;
}

/* Ensure post-media container has bottom border-radius */
.list-view .post-media {
  border-radius: 12px !important; /* Full border-radius for container */
  overflow: hidden !important; /* Ensure child elements respect border-radius */
}

/* Ensure post-media-expand-wrapper is visible and functional in list mode */
.list-view .post-media-expand-wrapper {
  display: block !important;
  margin-top: 8px !important;
  padding: 0 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.list-view .post-media-expand-link {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* List mode: Make images/videos fill entire post height like grid mode */
/* Remove all padding from post for image/video posts (same as grid-item) */
.js_posts_stream.list-view .post:has(.pg_wrapper),
.js_posts_stream.list-view .post:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.list-view .post:has(.post-media):has(.post-media-image),
.js_posts_stream.list-view .post:has(.post-product-wrapper),
.js_posts_stream.list-view .post:has(.youtube-player),
.js_posts_stream.list-view .post:has(.js_videojs) {
  padding: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--body-bg-color) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .js_posts_stream.list-view .post:has(.pg_wrapper),
body.night-mode .js_posts_stream.list-view .post:has(.post-media-image):not(:has(.post-media)),
body.night-mode .js_posts_stream.list-view .post:has(.post-media):has(.post-media-image),
body.night-mode .js_posts_stream.list-view .post:has(.post-product-wrapper),
body.night-mode .js_posts_stream.list-view .post:has(.youtube-player),
body.night-mode .js_posts_stream.list-view .post:has(.js_videojs) {
  background-color: var(--body-bg-nightmode) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Make images fill entire post-body (same as grid mode) */
/* Include article posts with cover images */
.list-view .post:has(.pg_wrapper) .post-media-image,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-media-image,
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image {
  width: 100% !important;
  height: 100% !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list-view .post:has(.pg_wrapper) .post-media-image img,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-media-image img,
.list-view .post:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  flex: 1;
}

.list-view .post:has(.js_videojs) .js_videojs {
  width: 100% !important;
  height: 100% !important;
}

.list-view .post:has(.js_videojs) .js_videojs video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Make YouTube player and video player fill container */
.list-view .post:has(.youtube-player) .youtube-player,
.list-view .post:has(.js_videojs) .js_videojs {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Default fallback */
  display: block;
  width: 100% !important;
  height: auto !important; /* Override base CSS height: 0 */
  min-height: 200px !important; /* Fallback minimum height */
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important; /* Override base CSS padding-top: 56% */
}

/* Ensure YouTube thumbnail image fills container */
.list-view .post:has(.youtube-player) .youtube-player img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure YouTube play button is centered */
.list-view .post:has(.youtube-player) .youtube-player .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Style YouTube player wrapper to remove padding/margin in list mode */
/* Also style article post wrapper to remove padding/margin */
.list-view .post:has(.youtube-player) .mt10.plr15,
.list-view .post:has(.youtube-player) > .post-body > .mt10.plr15,
.list-view .post-body:has(.youtube-player) .mt10.plr15,
.list-view .post:has(.post-media):has(.post-media-image) .mt10.plr15,
.list-view .post:has(.post-media):has(.post-media-image) > .post-body > .mt10.plr15,
.list-view .post-body:has(.post-media):has(.post-media-image) .mt10.plr15,
.list-view .post:has(.js_videojs) .overflow-hidden,
.list-view .post:has(.js_videojs) > .post-body > .overflow-hidden,
.list-view .post-body:has(.js_videojs) .overflow-hidden {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Remove margin-top on .mt10 in list mode */
.list-view .mt10 {
  margin-top: 0 !important;
}

/* List mode: pg_wrapper styling for image galleries */
.list-view .post:has(.pg_wrapper) .pg_wrapper {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure clearfix works for multiple images */
.list-view .post:has(.pg_wrapper) .pg_wrapper.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Fix reactions-stats-item background color */
.reactions-stats > .reactions-stats-item {
  background: var(--body-bg-color) !important;
}

body.night-mode .reactions-stats > .reactions-stats-item {
  background: var(--body-bg-nightmode) !important;
}

/* Fix post-media-meta background to match post */
.post-media-meta {
  background-color: var(--body-bg-color) !important;
}

body.night-mode .post-media-meta {
  background-color: var(--body-bg-nightmode) !important;
}

/* Fix post-media background to match post */
.post-media {
  background-color: var(--body-bg-color) !important;
}

body.night-mode .post-media {
  background-color: var(--body-bg-nightmode) !important;
}

/* Read more link for URL preview posts - List mode (same as grid) */
.list-view .post-media-expand-wrapper {
  margin-top: 8px;
  padding: 0 12px;
}

/* Read more link for URL preview posts in grid mode - matches readmore plugin styling */
.grid-view .post-media-expand-wrapper {
  margin-top: 8px;
  margin-bottom: 5px;
  padding: 0 12px;
}

/* Match readmore plugin link styling exactly - same as base a selector */
/* The readmore link (data-readmore-toggle) uses the base a selector which has color: var(--link-color) */
/* Use maximum specificity to override any other styles */
a.post-media-expand-link,
.list-view a.post-media-expand-link,
.list-view .post-media-expand-wrapper a.post-media-expand-link,
.list-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
.js_posts_stream.list-view a.post-media-expand-link,
.list-view .post-body .post-media-expand-wrapper a.post-media-expand-link,
.grid-view a.post-media-expand-link,
.grid-view .post-media-expand-wrapper a.post-media-expand-link,
.grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
.js_posts_stream.grid-view a.post-media-expand-link,
.grid-view .post-body .post-media-expand-wrapper a.post-media-expand-link {
  color: var(--link-color) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

a.post-media-expand-link:hover,
.list-view a.post-media-expand-link:hover,
.list-view .post-media-expand-wrapper a.post-media-expand-link:hover,
.list-view .post-media .post-media-expand-wrapper a.post-media-expand-link:hover,
.js_posts_stream.list-view a.post-media-expand-link:hover,
.grid-view a.post-media-expand-link:hover,
.grid-view .post-media-expand-wrapper a.post-media-expand-link:hover,
.grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link:hover,
.js_posts_stream.grid-view a.post-media-expand-link:hover {
  text-decoration: underline !important;
  color: var(--link-color) !important;
  background: transparent !important;
}

body.night-mode a.post-media-expand-link,
body.night-mode .list-view a.post-media-expand-link,
body.night-mode .list-view .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .list-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .js_posts_stream.list-view a.post-media-expand-link,
body.night-mode .grid-view a.post-media-expand-link,
body.night-mode .grid-view .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .js_posts_stream.grid-view a.post-media-expand-link {
  color: var(--link-color-nightmode) !important;
}

/* Add margin-bottom to readmore plugin links */
.list-view a[data-readmore-toggle],
.js_posts_stream.list-view a[data-readmore-toggle],
.list-view .post-text a[data-readmore-toggle],
.grid-view a[data-readmore-toggle],
.js_posts_stream.grid-view a[data-readmore-toggle],
.grid-view .post-text a[data-readmore-toggle] {
  margin-bottom: 10px !important;
  display: inline-block !important;
}

/* Style post-media-meta (hidden by default, shown via JS) */
.list-view .post-media-meta {
  padding: 12px;
  margin-top: 8px;
}

.list-view .post-media-meta .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: var(--text-color);
}

.list-view .post-media-meta .text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
  opacity: 0.8;
}

body.night-mode .list-view .post-media-meta .title {
  color: var(--text-color-nightmode);
}

body.night-mode .list-view .post-media-meta .text {
  color: var(--text-color-nightmode);
}

/* Style post-media-meta in grid mode (hidden by default, shown via JS) */
.grid-view .post-media-meta {
  padding: 12px;
  margin-top: 8px;
}

.grid-view .post-media-meta .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: var(--text-color);
}

.grid-view .post-media-meta .text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
  opacity: 0.8;
}

body.night-mode .grid-view .post-media-meta .title {
  color: var(--text-color-nightmode);
}

body.night-mode .grid-view .post-media-meta .text {
  color: var(--text-color-nightmode);
}

/* Night mode styling for list mode posts */
body.night-mode .list-view .post {
  /* background-color: var(--body-bg-nightmode) !important; */
}

body.night-mode .js_posts_stream.list-view .post-body {
  background-color: var(--body-bg-nightmode) !important;
}

body.night-mode .list-view .post-text {
  background-color: transparent !important;
  color: var(--text-color-nightmode) !important;
}

body.night-mode .list-view .post-text a {
  color: var(--primary-color) !important;
}

body.night-mode .list-view .post-text a:hover {
  color: var(--primary-color-hover) !important;
}

/* Night mode styling for grid-item new in list view */
body.night-mode .list-view .grid-item {
  background-color: var(--header-bg-color-nightmode) !important;
}

body.night-mode .js_posts_stream.grid-view, body.night-mode .js_posts_stream, body.night-mode .grid-view {
  /* background-color: var(--header-bg-color-nightmode) !important; */
}

/* Grid Mode: Fix reactions container positioning and styling */
.grid-view .reactions-wrapper {
  position: relative !important; /* Ensure relative positioning for absolute children */
}

.grid-view .reactions-container {
  position: fixed !important; /* Use fixed to avoid layout shifts and overflow issues */
  display: none !important; /* Hidden by default - force with !important */
  opacity: 0 !important; /* Start hidden - force with !important */
  visibility: hidden !important; /* Force with !important */
  pointer-events: none !important; /* Force with !important */
  z-index: 100000 !important; /* Ensure it appears above everything */
  background: rgba(255, 255, 255, 0.9) !important; /* More opaque for visibility */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important; /* Match react button pill */
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important; /* Stronger shadow for visibility */
  border: 1px solid rgba(255, 255, 255, 0.3) !important; /* More visible border */
  width: 180px !important; /* Fixed width for 3x3 grid */
  height: 180px !important; /* Fixed height for 3x3 grid */
  overflow: hidden !important; /* Keep icons inside the panel */
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  /* Position (left/top) will be calculated and set via JavaScript */
}

/* More specific override for any conflicting styles */
.grid-view .action-btn.reactions-wrapper .reactions-container {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 180px !important;
  height: 180px !important;
}

/* Force visible reactions container - highest specificity */
/* BUT: Only when explicitly shown via hover/active, not by default */
/* Hide by default even if it has inline styles */
.grid-view .reactions-container[style*="background"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Only show when parent is hovered or active */
.grid-view .reactions-wrapper:hover .reactions-container[style*="background"],
.grid-view .reactions-wrapper.active .reactions-container[style*="background"],
.grid-view .action-btn.reactions-wrapper:hover .reactions-container[style*="background"],
.grid-view .action-btn.reactions-wrapper.active .reactions-container[style*="background"] {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 180px !important;
  height: 180px !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 2px !important; /* Tighter grid to maximize icon size */
  place-items: center !important;
}

.grid-view .reactions-wrapper:hover .reactions-container,
.grid-view .reactions-wrapper.active .reactions-container,
.grid-view .action-btn.reactions-wrapper:hover .reactions-container,
.grid-view .action-btn.reactions-wrapper.active .reactions-container,
.grid-view .reactions-container:hover {
  display: grid !important; /* Use grid layout */
  opacity: 1 !important; /* Show with smooth transition */
  visibility: visible !important; /* Ensure visibility */
  pointer-events: auto !important; /* Enable interaction */
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columns */
  grid-template-rows: repeat(3, 1fr) !important; /* 3 rows */
  gap: 2px !important; /* Small gap between items */
  place-items: center !important; /* Center items in grid cells */
  /* Position and styling are set via JavaScript to prevent layout shifts */
}

.grid-view .reactions_item {
  position: static !important; /* Cancel absolute/animated positioning from default theme */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important; /* Slightly larger cells */
  height: 52px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Cursor pointer for reactions in flyout */
#grid-reactions-flyout .reactions_item,
#grid-reactions-flyout [data-reaction],
#grid-reactions-flyout .js_react-post,
#list-reactions-flyout .reactions_item,
#list-reactions-flyout [data-reaction],
#list-reactions-flyout .js_react-post {
  cursor: pointer !important;
}

/* Ensure all child elements inside reactions_item allow click events to bubble up */
#grid-reactions-flyout .reactions_item *,
#grid-reactions-flyout .emoji,
#grid-reactions-flyout .emoji *,
#list-reactions-flyout .reactions_item *,
#list-reactions-flyout .emoji,
#list-reactions-flyout .emoji * {
  pointer-events: none !important;
}

/* But the reactions_item itself should receive clicks */
#grid-reactions-flyout .reactions_item,
#list-reactions-flyout .reactions_item {
  pointer-events: auto !important;
}

/* List mode reactions flyout styling */
#list-reactions-flyout .reactions_item {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

#list-reactions-flyout .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

body.night-mode #list-reactions-flyout .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.grid-view .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

.grid-view .reactions_item .emoji {
  position: static !important; /* Ensure natural flow inside grid cell */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.grid-view .reactions_item .emoji img {
  width: 46px !important; /* Larger to better fill the cell */
  height: 46px !important;
  object-fit: contain !important;
}

/* Ensure reactions can render outside grid tiles and footers */
/* REMOVED - This was causing layout shifts and breaking border-radius on images */
/* We'll use position: fixed on the reactions container instead to avoid needing overflow: visible */

/* Night mode for reactions container */
body.night-mode .grid-view .reactions-container {
  background: rgba(30, 30, 30, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.night-mode .grid-view .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure icons/SVGs in grid-reactions-flyout are white in night mode */
/* BUT: Don't apply if custom profile design is active (profileDesignPostsText is defined) */
body.night-mode #grid-reactions-flyout svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout svg *:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .reactions_item svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .reactions_item svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

body.night-mode #grid-reactions-flyout .emoji svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .emoji svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Ensure icons/SVGs in list-reactions-flyout are white in night mode */
body.night-mode #list-reactions-flyout svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout svg *:not([data-profile-design]),
body.night-mode #list-reactions-flyout .reactions_item svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout .reactions_item svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

body.night-mode #list-reactions-flyout .emoji svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout .emoji svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Also handle images with filter for night mode */
body.night-mode #list-reactions-flyout .emoji img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Elevate wrapper only while visible (pairs with :has unclipping) */
@supports selector(:has(*)) {
  .grid-view .reactions-wrapper:hover,
  .grid-view .reactions-wrapper.active {
    z-index: 2147483647 !important;
  }
}

/* Fallback when :has is not supported: move the panel to viewport layer */
@supports not selector(:has(*)) {
  .grid-view .reactions-wrapper:hover .reactions-container,
  .grid-view .reactions-wrapper.active .reactions-container {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
  }
}

/* Removed conflicting post-actions rule - post actions should be absolutely positioned to overlay content (defined earlier) */

/* Removed conflicting action-btn rule - action buttons should be circular pills in list mode (defined earlier) */

/* Post body and contents background */
.js_posts_stream .post-body {
  background-color: var(--body-bg-color) !important;
}

/* .js_posts_stream .post-body * {
  background-color: var(--body-bg-color) !important;
} */

body.night-mode .js_posts_stream .post-body {
  background-color: var(--body-bg-color-nightmode) !important;
}

/* Commented out - causing issues with night mode styling */
/*
body.night-mode .js_posts_stream .post-body * {
  background-color: var(--body-bg-color-nightmode) !important;
}
*/

/* Exceptions to maintain glass effect - make these transparent so parent glass shows through */
body.night-mode .grid-view .post-header-pill-left .post-meta,
body.night-mode .grid-view .post-header-pill-left .post-avatar,
body.night-mode .grid-view .post-header-pill-left *:not(.post-avatar-picture) {
  background-color: transparent !important;
}

body.night-mode .grid-view .post-header-pill-right,
body.night-mode .grid-view .post-header-pill-right * {
  background-color: transparent !important;
}

/* Exception for post-text-pill to maintain glass effect */
body.night-mode .grid-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .grid-view .post-text-pill * {
  background-color: transparent !important;
}

/* Edit Post Form Styling - Ensure it fits within post box */
.js_posts_stream .post-edit {
  padding: 12px !important;
  margin: 12px !important;
  background-color: var(--body-bg-color) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.night-mode .js_posts_stream .post-edit {
  background-color: var(--body-bg-color-nightmode) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Edit post form textarea styling */
.js_posts_stream .post-edit .comment-form textarea {
  width: 100% !important;
  min-height: 80px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: var(--body-bg-color) !important;
  color: var(--body-text-color) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

body.night-mode .js_posts_stream .post-edit .comment-form textarea {
  background-color: var(--body-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Edit post form buttons styling */
.js_posts_stream .post-edit .text-end {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.js_posts_stream .post-edit .btn {
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
}

/* Ensure edit form is not hidden behind left pill - Grid View */
.js_posts_stream.grid-view .post-body:has(.post-edit) {
  padding-top: 100px !important;
}

.js_posts_stream.grid-view .post-body:has(.post-edit):has(.post-header-pill-left .post-scene) {
  padding-top: 130px !important;
}

/* Ensure edit form is not hidden behind left pill - List View */
.js_posts_stream.list-view .post-body:has(.post-edit) {
  padding-top: 100px !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit):has(.post-header-pill-left .post-scene) {
  padding-top: 130px !important;
}

/* When edit form is shown, ensure post-replace has enough margin */
.js_posts_stream.grid-view .post-body:has(.post-edit) .post-replace {
  margin-top: 0 !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit) .post-replace {
  margin-top: 0 !important;
}

/* Ensure all content in post-body when editing is visible and not behind left pill */
.js_posts_stream.grid-view .post-body:has(.post-edit) > *:not(.post-header-pill-left):not(.post-header-pill-right):not(.post-actions) {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit) > *:not(.post-header-pill-left):not(.post-header-pill-right):not(.post-actions) {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure post-edit itself is properly positioned and visible */
.js_posts_stream .post-body .post-edit {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Exception for post-actions container to maintain glass effect */
body.night-mode .grid-view .post-actions {
  background-color: transparent !important;
}

body.night-mode .grid-view .post-actions *:not(.action-btn) {
  background-color: transparent !important;
}

/* Exception for action buttons to maintain glass effect */
body.night-mode .js_posts_stream .post-body .action-btn,
body.night-mode .js_posts_stream .post-body .post-actions .action-btn,
body.night-mode .grid-view .post-body .action-btn,
body.night-mode .grid-view .post-actions .action-btn {
  background-color: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) !important;
  border-radius: 50% !important;
}

.js_posts_stream.grid-view ul,
.js_posts_stream ul,
.grid-view ul {
  background-color: transparent !important;
  border-radius: 12px;
}

body.night-mode .js_posts_stream.grid-view,
body.night-mode .grid-view {
  /* background-color: var(--header-bg-color-nightmode) !important; */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

/* List view should not have background color - keep it transparent */
body.night-mode .js_posts_stream.list-view,
body.night-mode .list-view {
  background-color: transparent !important;
}

body.night-mode .js_posts_stream.grid-view ul,
body.night-mode .js_posts_stream ul,
body.night-mode .grid-view ul {
  background-color: transparent !important;
}

/* Post avatar picture border radius */
.post-avatar-picture {
  border-radius: 12px !important;
}

/* Post container border radius - target all post elements */
.js_posts_stream .post,
.js_posts_stream .post-body,
.js_posts_stream .post-header,
.js_posts_stream .post-content,
.js_posts_stream .post-footer {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Main right panel padding */
.col-lg-4.js_sticky-sidebar.main-right-panel {
  padding-top: 20px;
}

/* Card mb-4 margin */
.card.mb-4 {
  margin-bottom: 33px !important;
}

/* Posts filter background */
.posts-filter.d-flex.align-items-center {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .posts-filter.d-flex.align-items-center {
  background-color: var(--body-bg-nightmode);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

/* Add spacing between publisher and filters */
.top-filters-index {
  padding-top: 12px !important;
  margin-top: 12px !important;
}

/* Top filters index styling */
.top-filters-index a.active {
  text-decoration: none !important;
  color: var(--body-text-color) !important;
}

.top-filters-index a:not(.active) {
  color: var(--side-menu-icon-inactive) !important;
  transition: all 0.3s ease !important;
}

.top-filters-index a:not(.active):hover {
  color: var(--body-text-color) !important;
}

body.night-mode .top-filters-index a.active {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .top-filters-index a:not(.active) {
  color: var(--side-menu-icon-inactive-nightmode) !important;
}

body.night-mode .top-filters-index a:not(.active):hover {
  color: var(--body-text-color-nightmode) !important;
}

/* Posts filter icons margin */
.posts-filter .d-flex.align-items-center.ml-auto {
  margin-top: 12px !important;
}

/* Button styling within posts filter */
.posts-filter .d-flex.align-items-center.ml-auto .btn:first-child {
  border-radius: 12px 0px 0px 12px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn:nth-child(2) {
  border-radius: 0px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn.btn-sm.btn-toggle-view[data-view="grid"] {
  border-radius: 0px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn.btn-sm.btn-toggle-view[data-view="list"] {
  border-radius: 0px 12px 12px 0px !important;
}

/* Post button styling */
.btn.js_publisher-btn.js_publisher,
.publisher-footer .btn.js_publisher-btn.js_publisher,
.publisher-footer-buttons .btn.js_publisher-btn.js_publisher,
.d-grid .btn.js_publisher-btn.js_publisher {
  border-radius: 12px !important;
}

/* ================== */
/* RIGHT PANEL */
/* ------------------------------- */

.main-right-panel {
  background: var(--bg-bg-color);
  /*padding-left: 33px;
  padding-right: 75px;*/
}

body.night-mode .main-right-panel {
  background: var(--bg-bg-color-nightmode);
}

.main-right-panel.chat-panel {
  background: var(--body-bg-color);
}

.chat-sidebar {
  background: var(--header-bg-color);
  color: #666;
  bottom: 0;
  padding: 10px;
  top: 70px;
  right: 0;
  width: 75px;
}

body.night-mode .chat-sidebar {
  background: var(--header-bg-color-nightmode);
}

.chat-sidebar-content {
  top: 10px;
  right: 0;
  left: 0;
}

.chat-sidebar-footer {
  right: 10px;
}

.chat-avatar img {
  border-radius: 12px !important;
}

.chat-avatar .online-status {
  /*border-color: #000;*/
  right: -4px;
  bottom: -4px;
}

.btn-chat {
  background: transparent;
}

.chat-widget-head {
  border-radius: 12px 12px 0 0 !important;
}

/* Chat widget when opened */
.chat-widget.chat-box.opened {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

/* Glass effect for chat widget - day mode */
.chat-widget.chat-box {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Glass effect for chat widget - night mode */
body.night-mode .chat-widget.chat-box {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Make chat widget head and content transparent to show glass effect */
.chat-widget-head {
  background: transparent !important;
}

body.night-mode .chat-widget-head {
  background: transparent !important;
}

.chat-widget-content {
  background: transparent !important;
}

body.night-mode .chat-widget-content {
  background: transparent !important;
}

/* Make chat-to area transparent to show glass effect */
.chat-to {
  background: transparent !important;
}

body.night-mode .chat-to {
  background: transparent !important;
}

/* Make chat-form transparent to show glass effect */
.chat-form {
  background: transparent !important;
}

body.night-mode .chat-form {
  background: transparent !important;
  border-top-color: var(--body-bg-nightmode) !important;
}

/* Chat user card avatar */
.chat-user-card .avatar img {
  border-radius: 12px !important;
}

/* ================== */
/* RIGHT PANEL CARDS STYLING */
/* ------------------------------- */

/* Add rounded corners and drop shadow to all cards in the main-right-panel */
.col-lg-4.js_sticky-sidebar.main-right-panel .card,
.col-lg-3.js_sticky-sidebar.main-right-panel .card,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  overflow: hidden !important;
}

/* Ensure card headers have rounded top corners */
.col-lg-4.js_sticky-sidebar.main-right-panel .card .card-header,
.col-lg-3.js_sticky-sidebar.main-right-panel .card .card-header,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card .card-header {
  border-radius: 12px 12px 0 0 !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Ensure card bodies have rounded bottom corners */
.col-lg-4.js_sticky-sidebar.main-right-panel .card .card-body,
.col-lg-3.js_sticky-sidebar.main-right-panel .card .card-body,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card .card-body {
  border-radius: 0 0 12px 12px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Night mode support for the cards */
body.night-mode .col-lg-4.js_sticky-sidebar.main-right-panel .card,
body.night-mode .col-lg-3.js_sticky-sidebar.main-right-panel .card,
body.night-mode .col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ================== *
/* PUBLISHER GAP */
/* ------------------------------- */

/* Remove box shadow from publisher and margin-bottom */
.publisher {
  box-shadow: none !important;
  margin-bottom: 0 !important;
  background: var(--body-bg-color) !important;
}

body.night-mode .publisher {
  background: var(--body-bg-nightmode) !important;
}

/* X-form publisher styling */
.x-form.publisher {
  border-radius: 12px !important;
}

/* Card mb-4 border radius and shadow */
.card.mb-4 {
  margin-bottom: 33px !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .card.mb-4 {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Horizontal gap between publisher and filters */

/* ================== *
/* CONTENT */
/* ------------------------------- */

.top-filters {
  display: flex;
  margin-bottom: 20px;
}

.top-filters a {
  color: var(--body-text-color);
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  /*text-transform: uppercase;*/
  padding: 10px;
  text-align: center;
  border-right: 1px solid var(--body-text-color);
}

@media screen and (min-width: 768px) {
  .top-filters a {
    font-size: 20px;
    line-height: 26px;
  }
}

@media screen and (min-width: 992px) {
  .top-filters a {
    font-size: 22px;
    line-height: 34px;
  }
}

@media screen and (min-width: 1200px) {
  .top-filters a {
    font-size: 26px;
    line-height: 36px;
  }
}


body.night-mode .top-filters a {
  color: var(--body-text-color-nightmode);
}

.top-filters a.active {
  color: var(--body-text-color) !important;
	font-weight: 800 !important;
}

body.night-mode .top-filters a.active {
  color: var(--body-text-color-nightmode) !important;
	font-weight: 800 !important;
}

.top-filters a:last-child {
  border-right: 0 none;
}



/* Top Filters Index Start */

.top-filters-index {
  display: flex;
  justify-content: flex-start; 
  /*margin-bottom: 20px;*/
  /*max-width: 50%;  */
  margin-left: auto; 
  margin-right: auto;
  padding-left:33px;
  margin-bottom: -25px !important;
}

@media only screen and (max-width: 768px) {
  .top-filters-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    padding-left:0px;
    align-items: center;
  }
  .top-filters-index a {
    font-size: 20px !important;
  }
  
  /* Hide create post/story dropdown and filter button on mobile */
  .top-filters-index > .dropdown,
  .top-filters-index .js_posts-filter {
    display: none !important;
  }
  
  /* Show scenes dropdown below filters on mobile - centered */
  .top-filters-index .js_scenes-filter {
    margin-top: 15px;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center;
    width: 100%;
    align-items: center;
  }
  
  .top-filters-index .js_scenes-filter .btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hide the old JavaScript-created mobile dropdown */
  .mobile-scenes-dropdown {
    display: none !important;
  }
  
  /* Hide any scenes dropdown that's not in top-filters-index */
  .top-filters-index ~ .js_scenes-filter,
  .top-filters-index ~ .mobile-scenes-dropdown {
    display: none !important;
  }
}

/* Hide old scenes dropdown from posts-filter section (both desktop and mobile) */
.posts-filter .scenes-dropdown-filter,
.posts-filter .js_scenes-filter {
  display: none !important;
}


.top-filters-index a {
  color: var(--body-text-color);
  flex: 0 1 auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  padding-right: 30px;
  text-align: left; 
  max-width: 33%; 
}

@media screen and (min-width: 768px) {
  .top-filters-index a {
    font-size: 20px;
    line-height: 26px;
  }
}

@media screen and (min-width: 992px) {
  .top-filters-index a {
    font-size: 22px;
    line-height: 34px;
  }
}

@media screen and (min-width: 1200px) {
  .top-filters-index a {
    font-size: 26px;
    line-height: 36px;
  }
}

body.night-mode .top-filters-index a {
  color: var(--body-text-color-nightmode);
}

.top-filters-index a.active {
  color: #000000 !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-underline-offset: 10px; 
}

body.night-mode .top-filters-index a.active {
  color: var(--body-text-color-nightmode) !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-underline-offset: 10px; 
}

.top-filters-index a:last-child {
  border-right: 0 none;
}

/* Top Filters Index End */




.add-story .img {
  border-radius: 0;
}

.post {
  border-radius: 0;
}

.publisher {
  border-radius: 0;
}

.post-avatar-picture {
  border-radius: 0;
}

.data-avatar img {
  border-radius: 12px;
}

.post-avatar .online-dot {
  right: 6px;
  bottom: -6px;
  margin-right: 0;
  color: #03ffe1;
}

.post-avatar .online-dot.offline {
  color: #999;
}

.post-meta .dropdown .dropdown-toggle {
  border-radius: 0;
}

.post-actions .action-btn {
  border-radius: 0;
}

.pg_photo {
  border-radius: 0;
}

.user-box img {
  border-radius: 0;
}

.content-tabs {
  border-radius: 0;
  background: var(--bg-bg-color) !important;
}

body.night-mode .content-tabs {
  background: var(--bg-bg-color-nightmode) !important;
}

.posts-filter .countries-filter,
.posts-filter .btn-group .btn {
  border-radius: 0;
}

.no-data {
  border-radius: 0;
}

.ui-box {
  border-radius: 0;
}


.post-media,
.post-media-image .image,
.post-media-image>div,
.post-footer,
.post-media-image .source,
.post-product-wrapper,
.post-funding-meta .funding-description,
.post-job-meta .job-description {
  border-radius: 0;
}

.post-text {
  border-radius: 0;
}

.post-text.js_readmore {
  padding-top: 15px;
}

.mt10 .pg_wrapper.clearfix {
  border-radius: 0;
}


@media (min-width: 768px) {
  .post-media,
  .post-media-image .image,
  .post-media-image>div,
  .post-footer,
  .post-media-image .source,
  .post-product-wrapper,
  .post-funding-meta .funding-description,
  .post-job-meta .job-description {
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .post-text {
    border-radius: 0;
    padding-left: 25px;
    padding-right: 25px;
  }

  .mt10 .pg_wrapper.clearfix {
    border-radius: 0;
    padding-left: 25px;
    padding-right: 25px;
  }
}


.article-wrapper,
.article-category {
  border-radius: 0;
}


/* ================== */


/* PROFILE */
/* ------------------------------- */

.profile-cover-wrapper {
  border-radius: 0;
}

.profile-tabs-wrapper {
  border-radius: 0;
}

/* ================== */


/* PUBLISHER */
/* ------------------------------- */

.publisher-tools-tab,
.publisher-footer-option {
  border-radius: 0;
}

.publisher-footer .publisher-footer-buttons {
  padding-right: 5px;
}



@media (max-width: 768px) {
  .publisher-tools-tabs ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; 
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow-x: hidden; 
  }

  .publisher-tools-tabs ul li {
    flex: 1 0 auto; 
    text-align: center; 
    margin: 0px ; 
  }

  .publisher-tools-tabs {
    margin: 0px ;
  }

  .publisher-footer-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px; 
    width: 100%;
  }

  .publisher-footer-buttons .btn-group,
  .publisher-footer-buttons .d-grid {
    flex: 1; 
    margin-bottom: 10px; 
    margin-left: 5px;
    margin-right: 5px;
  }

  .publisher-footer-buttons .btn {
    width: auto; 
  }

  .btn-group .dropdown-menu {
    left: 0; 
    right: auto;
  }
  .x-form.publisher .publisher-message {
    padding:15px 15px 0px 65px;
  }
  
}



/* ================== */


/* PROFILE */
/* ------------------------------- */

.new-profile-wrapper {
  margin-bottom: 20px;
}

.new-profile-wrapper .profile-header {
  border-radius: 0;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 12px;
}

.new-profile-wrapper .profile-avatar-wrapper,
.new-profile-wrapper .profile-name-wrapper,
.new-profile-wrapper .profile-buttons-wrapper {
  position: static;
}

.new-profile-wrapper .profile-avatar-wrapper {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.new-profile-wrapper .profile-avatar-wrapper img {
  border-radius: 12px !important;
  width: 100%;
  height: 100%;
}

.profile-avatar-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

.profile-avatar-wrapper img {
  border-radius: 12px !important;
}

.profile-header.mb20 {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Profile sidebar cards - Target specific cards by their unique child elements */
.theiaStickySidebar .card:has(.progress.mt5),
.theiaStickySidebar .card:has(.about-list),
.theiaStickySidebar .card:has(.side-panel-photos-grid),
.theiaStickySidebar .card:has(.circled-user-box) {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .theiaStickySidebar .card:has(.progress.mt5),
body.night-mode .theiaStickySidebar .card:has(.about-list),
body.night-mode .theiaStickySidebar .card:has(.side-panel-photos-grid),
body.night-mode .theiaStickySidebar .card:has(.circled-user-box) {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile buttons */
.profile-buttons-wrapper .btn.btn-sm.btn-secondary {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .profile-buttons-wrapper .btn.btn-sm.btn-secondary {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile action buttons (Connect, Follow, Chat, More) */
.profile-buttons-wrapper .btn.btn-md,
.profile-buttons-wrapper .btn.btn-icon {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .profile-buttons-wrapper .btn.btn-md,
body.night-mode .profile-buttons-wrapper .btn.btn-icon {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Social media icon buttons */
.theiaStickySidebar .btn.btn-social-icon {
  border-radius: 7px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .theiaStickySidebar .btn.btn-social-icon {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile cover and tabs border-radius based on banner presence */
/* When banner exists: cover gets top rounded corners, tabs get bottom rounded corners */
.profile-cover-wrapper {
  border-radius: 12px 12px 0px 0px !important;
  overflow: hidden;
}

.profile-cover-wrapper ~ .profile-tabs-wrapper.d-flex.justify-content-evenly {
  border-radius: 0px 0px 12px 12px !important;
}

/* When no banner: tabs get all rounded corners */
.profile-tabs-wrapper.d-flex.justify-content-evenly {
  border-radius: 12px !important;
}

/* Photos page card */
.card.panel-photos {
  border-radius: 12px !important;
  overflow: hidden;
}

.new-profile-wrapper .profile-avatar-change,
.new-profile-wrapper .profile-avatar-crop,
.new-profile-wrapper .profile-avatar-delete {
  right: 10px;
}

.new-profile-wrapper .profile-name-wrapper {
  text-shadow: none;
  background: transparent;
}

.new-profile-wrapper .profile-name-wrapper a {
  color: #000;
}

.new-profile-wrapper .profile-buttons-wrapper {
  background: transparent;
}

/* ================== */


/* ADMIN PANEL */
/* ------------------------------- */

.stat-panel {
  border-radius: 0;
}

/* ================== */




.page-header {
	display: none;
}

.js_search-form {
	margin-top: 20px;
}

.bg-red {
	background-color: var(--body-bg-color) !important;
  color: var(--body-text-color) !important;
}



.main-header .search-wrapper .form-control {
	background-color: #f2f2f2 !important;
}

/*.pg_wrapper a {
    background-position: center center !important;
    background-size: 50% 50% !important; 
}

.pg_wrapper a img {
    width: 50% !important;
    height: 50% !important;
}*/


.mlr5 {
    margin-top: 5px !important;
}

.d-inline-block {
    margin-top: 5px !important;
}



.ui-box {
    text-align: left; 
    padding-top: 10px; 
	margin-top: 0; 
	/*border: 1px solid #666;*/

}

.ui-box .user-info {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.ui-box .img {
    /*border-radius: 50%;*/
    padding: 4px;
    position: relative;
    top: 0; 
    left: 0; 
    transform: none; 
    margin-right: 5px; 
}

.ui-box .user-details {
    flex: 1;
    /*display: flex;*/
    align-items: center;
    justify-content: flex-start;
}

.ui-box img {
    border-radius: 0; 
    height: 92px;
    width: 92px;
}

.col-md-4 {
    padding-top: 0;
    padding-bottom: 0;
}

.publisher-avatar {
	border-radius: 7px !important;
}


@media (max-width: 480px) {
    .reactions-container {
        margin-top: 85px !important;
    }
}


.main-side-nav-card {
    height: 85vh !important;
    overflow-x: hidden !important; 
    overflow-y: auto !important;   
    padding-right: 2px !important; 
    box-sizing: content-box !important;
}

.main-side-nav-card::-webkit-scrollbar {
    width: 2px !important;  
    height: 2px !important;  
}

.main-side-nav-card::-webkit-scrollbar-thumb {
    border-radius: 1px !important;
    background: transparent !important; 
}

.main-side-nav-card:hover::-webkit-scrollbar-thumb {
    background: #333 !important; 
}

.main-side-nav-card {
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important; 
}

.main-side-nav-card:hover {
    scrollbar-color: #333 transparent !important; 
}


.dropdown-menu.gif-search.custom-scrollbar {
    overflow: auto !important;
    max-height: 31vh !important;
}


.offline-img {
    filter: grayscale(100%); 
}

/* .online-img {
    
} */



@media (min-width: 768px) {
    .main-side-nav .static, .main-side-nav a {
        margin-bottom: 0px !important;
    }
}





/*.chat-sidebar {
    background: #000;
    color: #666;
    bottom: 0;
    padding: 10px;
    top: 70px;
    right: 0;
    width: 75px;
    transition: 0.5s; 
    transform: translateX(50%);
    overflow-x: hidden; 
	poisition:absolute !important;
}


.chat-sidebar:hover {
    transform: translateX(0); 
}

body {
    overflow-x: hidden;
} */


/*

.btn-chat + .dropdown-menu {
    position: fixed !important;
    z-index: 1050 !important;
    right: 75px !important; 
}

.chat-sidebar {
  z-index: 9999 !important;
}
*/


/*
.user-info {
    display: flex !important;
    align-items: center !important; 
}

.user-details {
    display: flex !important;
    flex-direction: column !important; 
    justify-content: center !important;
}

.js_user-popover, .verified-badge {
    display: inline-block;
    margin-right: 5px; 
}
*/



.h9 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 14px;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-weight: bold;
}

.btn-group-sm > .btn, .btn-sm {
    font-size: 11px !important;
    padding: 8px 8px !important;
}



.profilebutton {
	padding-left: 10px!important ;
	padding-right: 10px!important;
}

.profilebutton2 {
	height: 44px !important;
	margin-top: 0px !important;
}



@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    /* width: 100%; */
    /*margin-top: 30px;*/
  }
}


.card-body.with-form,
.card-body.with-list,
.card-body.with-nav {
  padding: 0 !important;
}




@media screen and (min-width: 768px) {
  .col-lg-1 {
    width: 75px !important;
  }

  .col-md-2 {
    width: 75px !important;
  }
}


@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    /* 
    width: 100%;
    */
    /* 

    margin-top: 30px;
    */
  }

  .card-body.with-form,
  .card-body.with-list,
  .card-body.with-nav {
    padding: 0 !important;
  }
}


@media screen and (min-width: 768px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 10px;
  }
}



/* 
=======
Scenes 
=======
*/


/* Main Scenes Buttons */
#group_15 .checkbox-buttons label {
  font-size: 18px;
}


/* Form Labels */
#group_15 .form-label {
  font-size:0px;
}
#group_83 .form-label, #group_90 .form-label, #group_92 .form-label, 
#group_94 .form-label, #group_96 .form-label, #group_97 .form-label, 
#group_98 .form-label, #group_99 .form-label, #group_104 .form-label, 
#group_112 .form-label, #group_115 .form-label, #group_116 .form-label, 
#group_117 .form-label, #group_119 .form-label, #group_120 .form-label, 
#group_121 .form-label, #group_125 .form-label, #group_126 .form-label, 
#group_127 .form-label, #group_131 .form-label, #group_134 .form-label, 
#group_135 .form-label, #group_100 .form-label, #group_101 .form-label, 
#group_102 .form-label, #group_103 .form-label, #group_105 .form-label, 
#group_106 .form-label, #group_107 .form-label, #group_108 .form-label, 
#group_109 .form-label, #group_110 .form-label, #group_111 .form-label, 
#group_113 .form-label, #group_114 .form-label, #group_118 .form-label, 
#group_122 .form-label, #group_123 .form-label, #group_124 .form-label, 
#group_128 .form-label, #group_129 .form-label, #group_130 .form-label, 
#group_132 .form-label, #group_133 .form-label, #group_136 .form-label, 
#group_137 .form-label, #group_138 .form-label, #group_84 .form-label, 
#group_85 .form-label, #group_86 .form-label, #group_87 .form-label, 
#group_88 .form-label, #group_89 .form-label, #group_91 .form-label, 
#group_95 .form-label{
  font-size: 10px;
}



/* Main Scenes Container */
#group_15 {
  padding-bottom: 10px;
}


/* Master Group CSS */
#group_83, #group_84, #group_85, #group_86, #group_87, #group_88, #group_89, 
#group_90, #group_91, #group_92, #group_94, #group_95, #group_96, #group_97, 
#group_98, #group_99, #group_100, #group_101, #group_102, #group_103, #group_104, 
#group_105, #group_106, #group_107, #group_108, #group_109, #group_110, #group_111, 
#group_112, #group_113, #group_114, #group_115, #group_116, #group_117, #group_118, 
#group_119, #group_120, #group_121, #group_122, #group_123, #group_124, #group_125, 
#group_126, #group_127, #group_128, #group_129, #group_130, #group_131, #group_132, 
#group_133, #group_134, #group_135, #group_136, #group_137, #group_138 
{
  visibility: hidden;
  position: absolute;
}

/* #group_83, #group_90, #group_92, #group_94, #group_96, #group_97, #group_98, 
#group_99, #group_104, #group_112, #group_115, #group_116, #group_117, #group_119, 
#group_120, #group_121, #group_125, #group_126, #group_127, #group_131, #group_133, 
#group_134, #group_135

 {
  padding-left: 20px;
  border-left:20px solid var(--body-bg-color)
} */


/* Top Scenes */
/* #group_83, #group_90, #group_92, #group_94, #group_96, #group_97, #group_98, 
#group_99, #group_104, #group_112, #group_115, #group_116, #group_117, #group_119, 
#group_120, #group_121, #group_125, #group_126, #group_127, #group_131, #group_133, 
#group_134, #group_135
 {
  border-top: 5px solid var(--body-bg-color);
  padding-top: 20px;
} */



.checkbox-buttons {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-wrap: wrap;
  transition: flex 0.5s ease;
}

.btn-checkbox {
  display: none;
}

.btn-checkbox + label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  width: fit-content;
  margin: 2px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  color: #333;
  font-weight: normal;
  font-size: 14px !important;
}

.btn-checkbox:checked + label {
  background-color: var(--cs-mint);
  color: black;
  font-weight: normal;
  border: none;
  box-shadow: none;
  animation: pulse 1s ease-in-out 1;
}

.btn-checkbox:checked + label::after {
  display: none;
}

.btn-checkbox + label:hover {
  background-color: rgba(25, 184, 149, 0.1);
  border-color: rgba(25, 184, 149, 0.3);
  transform: translateY(-1px);
  color: black;
}

/* Override All Checkbox Types */
.btn-checkbox:checked + label,
.checkbox-item .btn-checkbox:checked + label,
.nested-checkbox-group .btn-checkbox:checked + label {
  color: black !important;
  background-color: var(--cs-mint) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Night Mode Styles */
body.night-mode .checkbox-buttons {

}

body.night-mode .btn-checkbox + label {
  color: var(--body-text-color-nightmode); 
  transition: all 0.3s ease;
}

body.night-mode .btn-checkbox:checked + label {
  background-color: var(--cs-mint);
  color: black;
  border: none;
  box-shadow: none;
}

body.night-mode .btn-checkbox + label:hover {
  background-color: rgba(25, 184, 149, 0.1);
  border-color: rgba(25, 184, 149, 0.3);
  transform: translateY(-1px);
  color: var(--cs-mint);
}


#youbtn {
  width: 96px;
}

.frbtn {
  font-size: 12px;
}




.ui-box {
  text-align: left !important;
  /*padding: 0px 10px 10px 0px !important;*/
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  margin-right: 10px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-width: 220px !important;
  overflow: hidden;
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;*/
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.ui-box:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 5000 !important;
}

.ui-box .user-info {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: row !important;
  margin-bottom: 10px !important;
}

.ui-box .img {
  padding: 0 !important;
  margin-right: 10px !important;
}

.ui-box .user-details {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ui-box img {
  height: 85px !important;
  width: 85px !important;
}

.ui-box .user-username {
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ui-box .user-username a {
  color: #000 !important;
  text-decoration: none !important;
}

.ui-box .user-username a:hover {
  text-decoration: underline !important;
}

.ui-box .user-details .mt5 {
  margin-top: 5px !important;
}

.ui-box .user-actions {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  width: 100%;
}

.ui-box .user-actions .btn {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  margin: 0 !important;
  background-color: transparent !important; 
  border: none !important; 
  color: inherit !important; 
}

body.night-mode .user-username a {
  color: #FFF !important;
}



.col-md-4 {
  padding: 0 !important; 
}


.tooltip {
  z-index: 9999 !important;
}



.form-group.text-center {
  text-align: center;
}

.form-check.d-inline-block {
  display: inline-block;
}


.custom-checkbox .form-check-input {
  width: 20px; 
  height: 20px; 
  appearance: none;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative; 
  outline: none; 
  cursor: pointer; 
}

.custom-checkbox .form-check-input:checked {
  background-color: var(--cs-mint); 
}

.custom-checkbox .form-check-input:checked::before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; 
  height: 70%; 
}




.trim-scrolling {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 1; 
  display: block; 
}


.trim-scrolling:hover {
  animation: scroll-text 5s linear infinite;
}

@keyframes scroll-text {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}


.ui-box .img {
  z-index: 2 !important;
}




body.visitor.n_chat {
  padding-top: 0px !important;
}


.csbeta-hidden {
  display: none !important;
}



#csbeta-back-button, #csbeta-next-button {
  box-shadow: none!important;
  font-size: 13px;
  font-weight: 600;
  padding: 1rem 2.5rem;
  white-space: nowrap;
  width: 100%;

  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
  border-radius: var(--bs-border-radius-pill)!important;

  background-color: transparent;
  background-image: none;
  border-color: #2dce89;
  color: #2dce89;
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25,135,84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}



.landing-left:before {
  opacity: 1 !important;
}

.content-tabs {
  /* margin-left: -11px; */
  justify-items: center;
}

.landing-form .card .js_panel .card-body .mt20 {
  color: #FFF !important;
}

.csbeta-form-section .js_hidden-section .form-check .form-check-label {
  color: #FFF !important;
}


#csbeta-section-2 .form-label {
  visibility: hidden !important;
}

#csbeta-section-2 .form-text {
  visibility: hidden !important;
}

.signupscenes_header {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: -5px;
  color: #666;
}

.signupscenes_text {
  color: #666;
	margin-top: -30px;
}

.badge.badge-lg.bg-info.ml5 {
  background-color: var(--cs-mint) !important;
  color: #FFFFFF !important;
}

.btn.btn-sm.btn-info.js_unfollow {
  background-color: var(--cs-mint);
  border: 0px;
}

.main-left-panel {
  min-height: 100vh !important;
}

.h-100 {
  height: 95% !important;
}


.badge.bg-info.ml5{
  background-color: var(--cs-mint) !important;
  color: #FFFFFF !important;
}

.cc-compliance .cc-btn.cc-dismiss {
  background-color: var(--link-color) !important;
}

.text-primary {
  color: var(--link-color) !important;
}

.nav.nav-pills.nav-fill.nav-started.mb30.js_wizard-steps .nav-item .nav-link.active {
  background-color: var(--link-color) !important;
}


.card-body.with-nav .theiaStickySidebar .card {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .card-body.with-nav .theiaStickySidebar .card {
  background-color: var(--header-bg-color-nightmode) !important;
}

.container-fluid.sg-offcanvas {
  background: var(--body-bg-color);
}

body.night-mode .container-fluid.sg-offcanvas {
  background: var(--body-bg-nightmode);
}

.row.h-100 {
  background-color: var(--body-bg-color);
}

body.night-mode .row.h-100 {
  background-color: var(--body-bg-nightmode);
}


.alert.alert-success.text-with-list {
  color: var(--body-text-color);
  background-color: var(--body-bg-color);
}

body.night-mode .alert.alert-success.text-with-list {
  color: var(--body-text-color-nightmode);
  background-color: var(--body-bg-nightmode);
}

.user-image-top {
  height: 70px !important;
  margin-left: 47px;
}

.user-image-top img {
  height: 70px !important;
}

/* Target images with specific inline styles (user profile images) - make smaller and add border radius */
img[style*="max-width: 283px"],
img[style*="width: 283px"],
img[style*="max-width: 283px"][style*="max-height: 283px"] {
  border-radius: 12px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* User image in sidebar */
.main-side-nav .user-image-top {
  height: auto !important;
  margin-left: 0;
  text-align: center;
  padding: 10px 0;
}

.main-side-nav .user-image-top img {
  height: auto !important;
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .main-side-nav .user-image-top img {
    border-radius: 12px !important;
  }
}

@media screen and (min-width: 768px) {
  .main-side-nav .user-image-top img {
    width: 100%;
    border-radius: 12px !important;
  }
}

/* Keep user image fixed size in expanded desktop sidebar */
.desktop-sidebar .main-side-nav .user-image-top img {
  width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  object-fit: cover;
  border-radius: 12px !important;
}

#menu_icon {
  padding-left: 18px;
  padding-top: 22px;
}

.cs-doodle {
  display: none;
}

@media (min-width: 990px) {
  .cs-doodle {
    display: block;
    font-size: 45px;
    font-family: var(--body-font-family);
  }
}

h6.mb0 {
  font-size: 25px;
}


.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/*.col-lg-9.main-center-panel {
  padding-right: 75px !important;
}*/

/*.col-lg-4.js_sticky-sidebar.main-right-panel {
  padding-left: 25px !important;
}*/

.col-md-4.col-lg-3.sg-offcanvas-sidebar.admin-sidebar {
  width: 18% !important;
}






/* Styles for Grid Mode */
.grid-view .grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px; 
  margin-right: -10px; 
}

.grid-view .grid-item {
  width: calc(33.333% - 20px); 
  margin: 10px;
  background: var(--body-bg-color);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  border-radius: 12px !important;
  overflow: visible !important;
  padding: 8px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  transform: translateZ(0); /* Force hardware acceleration */
  will-change: transform;
}

/* Remove padding on grid-item for image posts so images fill container */
.grid-view .grid-item:has(.pg_wrapper),
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)),
.grid-view .grid-item:has(.post-product-wrapper),
.grid-view .grid-item:has(.youtube-player),
.grid-view .grid-item:has(.js_videojs) {
  padding: 0 !important;
}

.grid-view .post-body {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.grid-view .grid-item.new {
  opacity: 0 !important;
  z-index: -1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  transition: opacity 0.4s ease-out !important;
}

body.night-mode .grid-view .grid-item {
  background: var(--body-bg-nightmode);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .grid-view .grid-item.new {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Grid Mode: Hide text labels for action buttons */
.grid-view .reaction-btn-name,
.grid-view .action-btn span {
  display: none !important;
}

/* Grid Mode: Adjust action button spacing - left aligned */
.grid-view .post-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: auto;
}

.grid-view .action-btn {
  flex: none;
  text-align: center;
  padding: 0;
  min-width: 44px;
  max-width: 44px;
}

/* Grid Mode: Override existing min-width rules */
.grid-view .action-btn.reactions-wrapper,
.grid-view .action-btn.js_comment,
.grid-view .action-btn.share-btn {
  min-width: 44px !important;
  flex: none !important;
}

/* Grid Mode: Style action icons */
.grid-view .action-icon {
  width: 20px !important;
  height: 20px !important;
}

.grid-view .reaction-btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid Mode: Ensure comment button is visible */
.grid-view .js_comment {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.grid-view .js_comment .action-icon {
  display: block !important;
  visibility: visible !important;
}

/* Grid Mode: Override x-hidden class for comment button */
.grid-view .js_comment.x-hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Grid Mode: Modern Overlay Design */
.grid-view .grid-item {
  position: relative;
  overflow: hidden;
}

/* Hide original post header in grid mode */
.grid-view .post-header {
  display: none !important;
}

/* Left Pill - User Info */
.grid-view .post-header-pill-left {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  max-width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.grid-view .post-header-pill-left .post-avatar {
  /* margin-right: 6px; */
  background: transparent !important;
}

/* Ensure all child elements are transparent except avatar picture */
.grid-view .post-header-pill-left *:not(.post-avatar-picture) {
  background: transparent !important;
}

.grid-view .post-header-pill-left .post-meta {
  background: transparent !important;
}

.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 7px !important;
}

/* Additional specificity to override any conflicting rules */
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture,
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture:before,
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture:after {
  border-radius: 7px !important;
}

.grid-view .post-header-pill-left .post-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0px 0px 0 0px !important;
}

.grid-view .post-header-pill-left .post-meta .post-author {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.grid-view .post-header-pill-left .post-meta .post-author a {
  color: #333;
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .post-author a:hover {
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.grid-view .post-header-pill-left .post-meta .verified-badge .svg-container {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grid-view .post-header-pill-left .post-meta .verified-badge svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--primary-color);
  vertical-align: middle;
}

.grid-view .post-header-pill-left .post-meta .post-time {
  font-size: 10px;
  color: #666;
  margin: 0;
  line-height: 1;
}

.grid-view .post-header-pill-left .post-meta .post-time a {
  color: #666;
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .post-time a:hover {
  text-decoration: none;
}

/* Scene name in grid view pill */
.grid-view .post-header-pill-left .post-meta .post-scene {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  line-height: 1.2;
}

.grid-view .post-header-pill-left .post-meta .post-scene span {
  color: #666;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-scene {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-scene span {
  color: #ccc;
}

/* Right Pill - Menu Options */
.grid-view .post-header-pill-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  border-radius: 12px !important;
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-header-pill-right,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.grid-view .grid-item:has(.post-product-wrapper) .post-header-pill-right,
.grid-view .grid-item:has(.youtube-player) .post-header-pill-right,
.grid-view .grid-item:has(.js_videojs) .post-header-pill-right,
.grid-view .post:has(.pg_wrapper) .post-header-pill-right,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.grid-view .post:has(.post-product-wrapper) .post-header-pill-right,
.grid-view .post:has(.youtube-player) .post-header-pill-right,
.grid-view .post:has(.js_videojs) .post-header-pill-right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-header-pill-right,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-header-pill-right,
.grid-view .grid-item:has(.youtube-player):hover .post-header-pill-right,
.grid-view .grid-item:has(.js_videojs):hover .post-header-pill-right,
.grid-view .post:has(.pg_wrapper):hover .post-header-pill-right,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.grid-view .post:has(.post-product-wrapper):hover .post-header-pill-right,
.grid-view .post:has(.youtube-player):hover .post-header-pill-right,
.grid-view .post:has(.js_videojs):hover .post-header-pill-right,
.grid-view .post-header-pill-right .dropdown.open,
.grid-view .post-header-pill-right:hover {
  opacity: 1;
  visibility: visible;
}

.grid-view .post-header-pill-right .dropdown {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
}

/* Ensure all child elements are transparent */
.grid-view .post-header-pill-right .dropdown * {
  background: transparent !important;
}

/* Hide expand icon in grid view - it's now in the dropdown menu */
.grid-view .post-header-pill-right .expand-post-icon {
  display: none !important;
}

.grid-view .post-header-pill-right .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

.grid-view .post-header-pill-right .fa-chevron-down::after {
  display: none !important;
}

/* YouTube controls pill styling */
.grid-view .youtube-controls-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
  margin-right: 8px;
  z-index: 10;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s ease;
}

/* When moved below the header pill on small screens */
.grid-view .youtube-controls-pill.youtube-controls-below {
  position: absolute !important;
  top: 36px !important;
  right: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

body.night-mode .grid-view .youtube-controls-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  border: none !important;
}

.grid-view .youtube-controls-pill * {
  background: transparent !important;
}

.grid-view .youtube-controls-pill .youtube-caption-toggle,
.grid-view .youtube-controls-pill .youtube-resize-toggle,
.grid-view .youtube-controls-pill .video-caption-toggle,
.grid-view .youtube-controls-pill .video-resize-toggle,
.grid-view .youtube-controls-pill .image-caption-toggle,
.grid-view .youtube-controls-pill .image-resize-toggle {
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.grid-view .youtube-controls-pill .youtube-resize-toggle,
.grid-view .youtube-controls-pill .video-resize-toggle,
.grid-view .youtube-controls-pill .image-resize-toggle {
  margin-right: 0;
}

.grid-view .youtube-controls-pill .youtube-caption-toggle:hover,
.grid-view .youtube-controls-pill .youtube-resize-toggle:hover,
.grid-view .youtube-controls-pill .video-caption-toggle:hover,
.grid-view .youtube-controls-pill .video-resize-toggle:hover,
.grid-view .youtube-controls-pill .image-caption-toggle:hover,
.grid-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

.grid-view .youtube-controls-pill .youtube-caption-toggle.active,
.grid-view .youtube-controls-pill .youtube-resize-toggle.active,
.grid-view .youtube-controls-pill .video-caption-toggle.active,
.grid-view .youtube-controls-pill .video-resize-toggle.active,
.grid-view .youtube-controls-pill .image-caption-toggle.active,
.grid-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle {
  color: #ccc;
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

.grid-view .post-header .dropdown {
  margin-left: auto;
}

.grid-view .post-header .expand-post-icon {
  color: #666;
  font-size: 16px;
  margin-right: 8px;
}

.grid-view .post-header .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

/* Bottom Action Circles - Left Aligned */
.grid-view .post-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  z-index: 10;
  border-top: none !important;
  border-bottom: none !important;
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-actions,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-actions,
.grid-view .grid-item:has(.post-product-wrapper) .post-actions,
.grid-view .grid-item:has(.youtube-player) .post-actions,
.grid-view .grid-item:has(.js_videojs) .post-actions,
.grid-view .post:has(.pg_wrapper) .post-actions,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-actions,
.grid-view .post:has(.post-product-wrapper) .post-actions,
.grid-view .post:has(.youtube-player) .post-actions,
.grid-view .post:has(.js_videojs) .post-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-actions,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-actions,
.grid-view .grid-item:has(.youtube-player):hover .post-actions,
.grid-view .grid-item:has(.js_videojs):hover .post-actions,
.grid-view .post:has(.pg_wrapper):hover .post-actions,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.grid-view .post:has(.post-product-wrapper):hover .post-actions,
.grid-view .post:has(.youtube-player):hover .post-actions,
.grid-view .post:has(.js_videojs):hover .post-actions,
.grid-view .grid-item:has(.reactions-wrapper.active) .post-actions,
.grid-view .post:has(.reactions-wrapper.active) .post-actions {
  opacity: 1;
  visibility: visible;
}

/* Hide YouTube controls pill by default on media posts, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .youtube-controls-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.grid-view .grid-item:has(.post-product-wrapper) .youtube-controls-pill,
.grid-view .grid-item:has(.youtube-player) .youtube-controls-pill,
.grid-view .grid-item:has(.js_videojs) .youtube-controls-pill,
.grid-view .post:has(.pg_wrapper) .youtube-controls-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.grid-view .post:has(.post-product-wrapper) .youtube-controls-pill,
.grid-view .post:has(.youtube-player) .youtube-controls-pill,
.grid-view .post:has(.js_videojs) .youtube-controls-pill {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .youtube-controls-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.grid-view .grid-item:has(.post-product-wrapper):hover .youtube-controls-pill,
.grid-view .grid-item:has(.youtube-player):hover .youtube-controls-pill,
.grid-view .grid-item:has(.js_videojs):hover .youtube-controls-pill,
.grid-view .post:has(.pg_wrapper):hover .youtube-controls-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.grid-view .post:has(.post-product-wrapper):hover .youtube-controls-pill,
.grid-view .post:has(.youtube-player):hover .youtube-controls-pill,
.grid-view .post:has(.js_videojs):hover .youtube-controls-pill {
  opacity: 1;
  visibility: visible;
}

/* Hide post-stats in grid mode (numbers appear on buttons) */
.grid-view .post-stats {
  visibility: hidden !important;
}

/* Remove post-stats height for image posts only in grid mode to prevent layout shift */
.grid-view .post:has(.pg_wrapper) .post-stats,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-stats,
.grid-view .post:has(.post-product-wrapper) .post-stats,
.grid-view .post:has(.youtube-player) .post-stats,
.grid-view .post:has(.js_videojs) .post-stats {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.grid-view .action-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Ensure all child elements are transparent except icons */
.grid-view .action-btn *:not(.action-icon):not(.reaction-btn-icon):not(.reactions-container):not(.reactions-container *):not(.reaction-count):not(.comment-count):not(.share-count) {
  background: transparent !important;
}

.grid-view .action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.grid-view .action-btn .action-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

.grid-view .action-btn .reaction-btn-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

/* Reaction count badge */
.grid-view .action-btn .reaction-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Comment count badge */
.grid-view .action-btn .comment-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Share count badge */
.grid-view .action-btn .share-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Night mode - ensure count badges maintain same styling */
body.night-mode .grid-view .action-btn .reaction-count,
body.night-mode .grid-view .action-btn .comment-count,
body.night-mode .grid-view .action-btn .share-count {
  background: #03FFE1 !important;
  color: black !important;
}

/* Glassy styling for action dropdown menu in grid mode */
/* Hide original dropdown menu in grid mode when flyout is active */
.grid-view .action-dropdown-menu.grid-dropdown-hidden,
.grid-view .dropdown-menu.action-dropdown-menu.grid-dropdown-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.grid-view .action-dropdown-menu,
.grid-view .dropdown-menu.action-dropdown-menu {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .grid-view .action-dropdown-menu,
body.night-mode .grid-view .dropdown-menu.action-dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* Hide text labels in action buttons */
.grid-view .action-btn span {
  display: none !important;
}

/* Night mode adjustments */
body.night-mode .grid-view .post-header-pill-left {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .grid-view .post-header-pill-right .dropdown {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-author {
  color: #fff;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-author a {
  color: #fff;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-time {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-time a {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-right .expand-post-icon,
body.night-mode .grid-view .post-header-pill-right .fa-chevron-down {
  color: #ccc;
}

body.night-mode .grid-view .action-btn {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50% !important;
}

body.night-mode .grid-view .action-btn .action-icon,
body.night-mode .grid-view .action-btn .reaction-btn-icon {
  color: #fff;
}

/* Grid Mode: Smooth Post Expansion */
.grid-view .grid-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Grid Mode: Expansion Container */
.grid-expansion-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 800px;
  height: 80vh;
  max-height: 600px;
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.grid-expansion-container.active {
  opacity: 1;
  visibility: visible;
}

.grid-expansion-container .grid-item {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.3);
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative;
}

/* Grid Mode: Expanded Post Badges */
.grid-expansion-container .verified-badge,
.grid-expansion-container .staff-badge {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

/* Grid Mode: Expanded Post Time Elements */
.grid-expansion-container .js_moment {
  display: inline-block !important;
}

/* Prevent external JavaScript from processing expanded content */
.grid-expansion-container * {
  pointer-events: auto !important;
}

/* Override any external moment.js processing for expanded content */
.grid-expansion-container .js_moment {
  /* Lock the moment element to prevent external processing */
  position: relative !important;
  z-index: 1 !important;
}

/* Expanded Post Overlay - Separate from modal-content-container */
.expanded-post-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto;
  align-items: center;
  justify-content: center;
}

/* Expanded Post Container - Based on modal-content-container but separate */
.expanded-post-container {
  position: relative; /* Needed for absolute positioning of close button */
  margin: 5% auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
  background-color: var(--header-bg-color);
  max-height: 90%;
  border-radius: 6px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  overflow: visible; /* Changed to visible so close button can be outside */
}

/* Inner wrapper for scrollable content - full width */
.expanded-post-container .expanded-post-content {
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Remove Bootstrap column constraints from content inside */
.expanded-post-container .expanded-post-content .col-lg-8,
.expanded-post-container .expanded-post-content .col-lg-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Hide expand icon in expanded post view */
.expanded-post-container .expand-post-icon {
  display: none !important;
}

/* Hide grid-specific text pill in expanded post view to prevent duplicate text */
.expanded-post-container .post-text-pill,
.expanded-post-container .post-text-pill-content {
  display: none !important;
}

/* Hide "Read more" link in expanded post view since full content is already shown */
.expanded-post-container .post-media-expand-wrapper,
.expanded-post-container .post-media-expand-link {
  display: none !important;
}

/* Show OG meta content (title and description) by default in expanded post view */
.expanded-post-container .post-media-meta {
  display: block !important;
}

/* Fix post-media background color in expanded post view */
.expanded-post-container .post-media {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .post-media {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Fix post-media-meta background color in expanded post view */
.expanded-post-container .post-media-meta {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .post-media-meta {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Remove box shadow from post in expanded post view */
.expanded-post-container .post {
  box-shadow: none !important;
}

/* Fix reactions-stats-item background color in expanded post view */
.expanded-post-container .reactions-stats > .reactions-stats-item {
  background: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .reactions-stats > .reactions-stats-item {
  background: var(--header-bg-color-nightmode) !important;
}

body.night-mode .expanded-post-container {
  background-color: var(--header-bg-color-nightmode);
}

/* Expanded Post Close Button - positioned outside the modal */
.expanded-post-close {
  color: #ffffff;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 10001;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  pointer-events: auto;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.expanded-post-close:hover,
.expanded-post-close:focus {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  color: #ffffff;
  text-decoration: none;
}

body.night-mode .expanded-post-close {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.night-mode .expanded-post-close:hover,
body.night-mode .expanded-post-close:focus {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

@media only screen and (max-width: 768px) {
  .expanded-post-close {
    visibility: hidden;
  }
}

/* Prevent body scrolling when expanded post is open */
body.expanded-post-open {
  overflow: hidden;
}

/* Grid Mode: Expansion Overlay */
.grid-expansion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.grid-expansion-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Grid Mode: Close Button */
.grid-expansion-container .expand-close-btn,
.expanded-post-isolation .expand-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.grid-expansion-container .expand-close-btn:hover,
.expanded-post-isolation .expand-close-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Prevent body scroll when post is expanded */
body.no-scroll {
  overflow: hidden;
}

/* Styles for List Mode */
.list-view .grid {
  display: block;
}

.list-view .grid-item {
  width: 100%;
  margin: 0 0 10px;
}

.list-view .post-body {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .list-view .post-body {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Fix comment box height in list view - prevent infinite expansion */
.list-view .post-comments {
  max-height: 60vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.grid-view .post-media,
.grid-view .post-media-image .image,
.grid-view .post-media-image>div,
.grid-view .post-footer,
.grid-view .post-media-image .source,
.grid-view .post-product-wrapper,
.grid-view .post-funding-meta .funding-description,
.grid-view .post-job-meta .job-description {
  border-radius: 12px;
  padding: 0 !important;
  margin: 0 !important;
}

/* Set min-height for OG images in grid posts */
.grid-view .post-media .post-media-image .image {
  min-height: 150px !important;
}

/* Article posts with cover images - make the inner div fill container in grid mode */
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image > div {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* Override inline padding-top: 50% */
  aspect-ratio: 2 / 1 !important; /* Default 2:1 aspect ratio for articles */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Fix source badge size on article posts - prevent it from inheriting width/height */
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image .source {
  width: 20px !important;
  height: 20px !important;
}

/* Set min-height for OG images in list mode (same as grid mode) */
.list-view .post-media .post-media-image .image {
  min-height: 150px !important;
}

/* Make images fill full width and height of container for image posts */
/* Include article posts with cover images */
.grid-view .grid-item:has(.pg_wrapper) .post-media-image .image,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image .image,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image .image,
.grid-view .grid-item:has(.pg_wrapper) .post-media-image>div,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image>div,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image>div,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .pg_wrapper,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media,
.grid-view .grid-item:has(.post-product-wrapper) .post-product-wrapper,
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .grid-item:has(.js_videojs) .js_videojs {
  width: 100% !important;
  height: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .post-media-image img,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image img,
.grid-view .grid-item:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Style YouTube player wrapper to remove padding/margin in grid mode */
/* Also style article post wrapper to remove padding/margin */
.grid-view .grid-item:has(.youtube-player) .mt10.plr15,
.grid-view .grid-item:has(.youtube-player) > .post-body > .mt10.plr15,
.grid-view .post-body:has(.youtube-player) .mt10.plr15,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .mt10.plr15,
.grid-view .grid-item:has(.post-media):has(.post-media-image) > .post-body > .mt10.plr15,
.grid-view .post-body:has(.post-media):has(.post-media-image) .mt10.plr15,
.grid-view .grid-item:has(.js_videojs) .overflow-hidden,
.grid-view .grid-item:has(.js_videojs) > .post-body > .overflow-hidden,
.grid-view .post-body:has(.js_videojs) .overflow-hidden {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Comment out margin-top on .mt10 in grid mode */
.grid-view .mt10 {
  /* margin-top: 10px; */
  margin-top: 0 !important;
}

/* Make YouTube player position relative for play button and fill container */
/* Aspect ratio will be set dynamically by JavaScript based on actual video dimensions */
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .post-body:has(.youtube-player) .youtube-player,
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .post-body:has(.js_videojs) .js_videojs {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Default fallback, will be overridden by JavaScript */
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure YouTube thumbnail image fills container */
.grid-view .grid-item:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure video player fills container and displays poster correctly */
.grid-view .grid-item:has(.js_videojs) .js_videojs video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure YouTube play button is centered */
.grid-view .grid-item:has(.youtube-player) .youtube-player .play,
.grid-view .post-body:has(.youtube-player) .youtube-player .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Handle YouTube posts with text - style like image+text posts */
.grid-view .grid-item:has(.youtube-player):has(.post-text-pill) .youtube-player {
  height: auto !important;
  min-height: 200px;
}

/* Handle video posts with text - style like image+text posts */
.grid-view .grid-item:has(.js_videojs):has(.post-text-pill) .js_videojs {
  height: auto !important;
  min-height: 200px;
}

/* Remove any black borders from video containers */
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .grid-item:has(.js_videojs) .overflow-hidden,
.grid-view .post:has(.js_videojs) .js_videojs,
.grid-view .post:has(.js_videojs) .overflow-hidden,
.list-view .post:has(.js_videojs) .js_videojs,
.list-view .post:has(.js_videojs) .overflow-hidden {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Fix black lines around corners for video elements with border-radius */
.grid-view .grid-item:has(.js_videojs) .js_videojs video.vjs-tech,
.grid-view .post:has(.js_videojs) .js_videojs video.vjs-tech,
.list-view .post:has(.js_videojs) .js_videojs video.vjs-tech,
.grid-view .grid-item:has(.js_videojs) video,
.grid-view .post:has(.js_videojs) video,
.list-view .post:has(.js_videojs) video,
.grid-view .grid-item:has(.js_videojs) .video-js video,
.grid-view .post:has(.js_videojs) .video-js video,
.list-view .post:has(.js_videojs) .video-js video {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fix video-js wrapper to prevent black lines */
.grid-view .grid-item:has(.js_videojs) .video-js,
.grid-view .post:has(.js_videojs) .video-js,
.list-view .post:has(.js_videojs) .video-js {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Fix black lines around corners for images with border-radius */
.grid-view .grid-item .post-media-image .image,
.grid-view .grid-item .post-media-image img,
.grid-view .grid-item .pg_wrapper img,
.list-view .post-media-image .image,
.list-view .post-media-image img,
.list-view .pg_wrapper img {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Ensure video containers have proper border-radius and overflow */
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .post:has(.js_videojs) .js_videojs,
.list-view .post:has(.js_videojs) .js_videojs {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Ensure image containers have proper border-radius and overflow */
.grid-view .grid-item .post-media-image,
.grid-view .grid-item .pg_wrapper,
.list-view .post-media-image,
.list-view .pg_wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Fix black lines for YouTube players */
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .post:has(.youtube-player) .youtube-player,
.list-view .post:has(.youtube-player) .youtube-player {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
}

.grid-view .grid-item:has(.youtube-player) .youtube-player img,
.grid-view .post:has(.youtube-player) .youtube-player img,
.list-view .post:has(.youtube-player) .youtube-player img {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Fix black lines for post-media containers */
.grid-view .grid-item .post-media,
.list-view .post-media {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Ensure video and image elements inside rounded containers respect border-radius */
.grid-view .grid-item:has(.js_videojs) video,
.grid-view .grid-item:has(.youtube-player) img,
.grid-view .grid-item .post-media-image img,
.grid-view .grid-item .pg_wrapper img,
.list-view .post:has(.js_videojs) video,
.list-view .post:has(.youtube-player) img,
.list-view .post-media-image img,
.list-view .pg_wrapper img {
  border-radius: 12px !important;
}

/* Hide text pill by default for landscape YouTube videos, video posts, and images */
.grid-view .grid-item.youtube-landscape .post-text-pill.landscape-hidden,
.grid-view .grid-item.video-landscape .post-text-pill.landscape-hidden,
.grid-view .grid-item.image-landscape .post-text-pill.landscape-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Show text pill when toggled for landscape media */
.grid-view .grid-item.youtube-landscape .post-text-pill.landscape-visible,
.grid-view .grid-item.video-landscape .post-text-pill.landscape-visible,
.grid-view .grid-item.image-landscape .post-text-pill.landscape-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Style for expanded YouTube player, video posts, and images (spanning all columns) */
.grid-view .grid-item.youtube-expanded,
.grid-view .grid-item.video-expanded,
.grid-view .grid-item.image-expanded {
  position: relative !important;
  z-index: 100 !important;
}

.grid-view .grid-item.youtube-expanded .youtube-player,
.grid-view .grid-item.video-expanded .js_videojs {
  aspect-ratio: 21 / 9; /* Wider aspect ratio for expanded view */
}

/* Active state for toggle buttons */
.grid-view .youtube-caption-toggle.active,
.grid-view .youtube-resize-toggle.active,
.grid-view .video-caption-toggle.active,
.grid-view .video-resize-toggle.active,
.grid-view .image-caption-toggle.active,
.grid-view .image-resize-toggle.active {
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

/* Fix multiple images collage layout in grid view */
/* Ensure pg_wrapper maintains proper structure for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure clearfix works for multiple images */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* For 2 images - force float layout to display side by side */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_2x {
  float: left !important;
  width: 50% !important;
  padding-right: 1px;
  box-sizing: border-box;
  display: block !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_2x > a {
  padding-bottom: 100% !important;
}

/* For 3 images - force float layout for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x {
  width: 100% !important;
  display: block;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3 {
  float: left !important;
  width: 66.66% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3 {
  float: right !important;
  width: 33.34% !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in {
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

/* For 4+ images - force float layout for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x {
  width: 100% !important;
  display: block;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3 {
  float: left !important;
  width: 66.66% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3 {
  float: right !important;
  width: 33.34% !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in {
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override JavaScript inline width styles but keep within bounds */
/* The JS calculates widths, but we need to ensure they fill containers without overflow */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3 {
  max-width: 33.34% !important;
  overflow: visible;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3 {
  max-width: 66.67% !important;
  overflow: visible;
}

/* Inner elements should fill their parent containers without exceeding */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .post-text {
  border-radius: 12px;
  padding-left: 25px;
  padding-right: 25px;
}

.grid-view .mt10 .pg_wrapper.clearfix {
  border-radius: 12px;
  padding-left: 0px;
  padding-right: 0px;
}

.grid-view .plr15 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.grid-view .mt10 .pg_wrapper.clearfix .blur {
  filter: blur(5px) !important;
  width: 95% !important;
}

.grid-view .post-meta .float-end {
  padding-left: 5px;
}

.grid-view .grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Preserve mention avatar sizes in grid mode */
.grid-view .mention-avatar {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

.grid-view .album-photo img {
  width: 100%;
  height: auto;
  display: block;
}


.grid-view .post-meta {
  padding: 10px 10px 0 0px !important;
}

/* Grid Loading Animation */
.grid-loading-skeleton {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.grid-loading-skeleton .skeleton-item {
  width: calc(33.333% - 20px);
  margin: 10px;
  background: var(--body-bg-color);
  border-radius: 12px;
  overflow: hidden;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

body.night-mode .grid-loading-skeleton .skeleton-item {
  background: var(--body-bg-nightmode);
}

.grid-loading-skeleton .skeleton-item .skeleton-content {
  padding: 20px;
}

.grid-loading-skeleton .skeleton-item .skeleton-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.grid-loading-skeleton .skeleton-item .skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-right: 12px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-avatar {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

.grid-loading-skeleton .skeleton-item .skeleton-text {
  flex: 1;
}

.grid-loading-skeleton .skeleton-item .skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 8px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-line {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

.grid-loading-skeleton .skeleton-item .skeleton-line.short {
  width: 60%;
}

.grid-loading-skeleton .skeleton-item .skeleton-line.medium {
  width: 80%;
}

.grid-loading-skeleton .skeleton-item .skeleton-media {
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
  margin-top: 15px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-media {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Show skeleton by default */
.js_posts_stream .grid-loading-skeleton {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Grid view skeleton - multiple posts */
.js_posts_stream.grid-view .grid-loading-skeleton {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

/* List view skeleton - single post */
.js_posts_stream.list-view .grid-loading-skeleton {
  display: block;
}

.js_posts_stream.list-view .grid-loading-skeleton .skeleton-item {
  width: 100%;
  margin: 0 0 20px 0;
}

/* Hide skeleton when posts are loaded */
.js_posts_stream.loaded .grid-loading-skeleton {
  opacity: 0;
  pointer-events: none;
}

/* Show posts when loaded */
.js_posts_stream.loaded ul {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Hide posts when loading */
.js_posts_stream:not(.loaded) ul {
  display: block;
  opacity: 0;
}










.fas.fa-sliders-h {
  font-size: 16px;
}

/* Fix ad positioning in grid mode */
.grid-view .card-body {
  position: relative !important;
  z-index: auto !important;
}

.grid-view .adsbygoogle {
  position: relative !important;
  z-index: auto !important;
  display: block !important;
}

.grid-view .adsbygoogle iframe {
  position: relative !important;
  z-index: auto !important;
}

/* Ensure ads appear as grid items */
.grid-view .card {
  width: calc(33.333% - 20px);
  margin: 10px;
  background: var(--body-bg-color);
  border-radius: 12px !important;
  overflow: hidden !important;
  display: inline-block;
  vertical-align: top;
}

body.night-mode .grid-view .card {
  background: var(--body-bg-nightmode);
}

/* Ads wrapped in grid-item should fill the grid item */
.grid-view .grid-item .card {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

/* Make ads participate in grid layout */
.grid-view .container-fluid .card,
.grid-view .container .card {
  width: calc(33.333% - 20px) !important;
  margin: 10px !important;
  display: inline-block !important;
  vertical-align: top !important;
  float: none !important;
}

/* Ensure ads appear between posts in the flow */
.grid-view .js_posts_stream .card {
  width: calc(33.333% - 20px) !important;
  margin: 10px !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* Posts stream ads styling */
.posts-stream-ad {
  background: var(--body-bg-color);
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.night-mode .posts-stream-ad {
  background: var(--body-bg-nightmode);
}

.ad-placeholder-posts {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
  border: 2px dashed #ccc !important;
  border-radius: 8px !important;
  color: #666 !important;
  font-family: Arial, sans-serif !important;
}

body.night-mode .ad-placeholder-posts {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border-color: #555 !important;
  color: #ccc !important;
}








/*.main-wrapper .container-fluid.mt20.sg-offcanvas {
  padding-right: 6% !important;
}

.main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--body-bg-color) !important;
  padding-right: 5%;  
}

@media (min-width: 1201px) {
  .main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar {
    padding-right: 55px;  
  }
}
*/


/*.main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar .row.h-100 .col-lg-4.js_sticky-sidebar.main-right-panel{
  padding-right: 2%;
}*/


@media (min-width: 992px) {
  .col-lg-11 {
      width: 93%;
      padding-right: 80px;
  }

  .col-lg-9.main-center-panel {
    padding-right: 10px;
  }

  .main-wrapper .container-fluid.mt20.sg-offcanvas .row .col-md-8.col-lg-9.sg-offcanvas-mainbar {
    width: 69% !important;
    padding-right: 75px !important;
  }
  
  .col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar {
    padding-left: 33px;
    padding-right: 33px;
  }

  .js_posts_stream .post {
    padding-left: 33px;
    padding-right: 33px;
    box-shadow: none !important;
  }
  .js_posts_stream.grid-view .post {
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: none !important;
  }
  .js_posts_stream.grid-view .post-body {
    margin-bottom: -20px;
  }
}




/* Styles for Desktop Menu Icon and Sidebar */
.csmenu {
  z-index: 1003; 
}

.desktop-sidebar {
  position: absolute; 
  left: -300px;
  width: 300px;
  height: calc(100% - 75px); 
  background: var(--header-bg-color);
  transition: left 0.3s ease-in-out; 
  z-index: 1002; 
}

.desktop-sidebar.active {
  left: 0;
  top: 0px; 
  z-index: 1004;
  height: 100vh;
}

body.night-mode .desktop-sidebar.active {
  background: var(--header-bg-color-nightmode);
}

.desktop-sidebar .sidebar-content .main-side-nav {
  padding-left: 0;
  width: auto !important;
}

.desktop-sidebar .sidebar-content .main-side-nav ul {
  margin-left: -11px !important;
}

.desktop-sidebar .sidebar-content .main-side-nav li {
  text-align: left;
  padding-left: 8px;
}

.desktop-sidebar .sidebar-content .main-side-nav li a {
  display: flex;
  align-items: center;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1001;
}

.overlay.active {
  display: block;
}

body.noscroll {
  overflow: hidden;
}







/* logo initial load */ 
#logo {
  visibility: hidden;  
}


/* Hide logo on mobile devices */
@media (max-width: 768px) {
  #logo {
      display: none !important;
  }
}



@media (max-width: 768px) {
  .main-wrapper {
    width: 100% !important;
  }
}




/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto; 
}

/* Modal content container */
.modal-content-container {
  position: relative;
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  background-color: var(--header-bg-color);
  overflow-y: auto;
  max-height: 90%; 
  border-radius:6px;
}

body.night-mode .modal-content-container {
  background-color: var(--header-bg-color-nightmode);
}

/* Publisher modal border radius - target modal-content when it contains publisher */
.modal-content:has(.publisher),
.modal-content:has(.x-form.publisher) {
  border-radius: 12px !important;
}

/* Fallback for browsers that don't support :has() */
.modal-content .publisher,
.modal-content .x-form.publisher {
  border-radius: 12px;
}

/* Close Button */
.modal-post-close {
  color: var(--body-text-color);
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0px;
  z-index: 50;
}

@media only screen and (max-width: 768px) {
  .modal-post-close {
    visibility: hidden;
  }
}

.modal-post-close:hover,
.modal-post-close:focus {
  color: var(--body-text-color);
  text-decoration: none;
}

body.night-mode .modal-post-close {
  color: var(--body-text-color-nightmode);
}

body.night-mode .modal-post-close:hover,
body.night-mode .modal-post-close:focus {
  color: var(--body-text-color-nightmode);
}



/* Prevent body scrolling when modal is active */
body.modal-open {
  overflow: hidden;
}

/* Hide expand icon when modal is open */
body.modal-open .expand-post-icon {
  display: none;
}








@media (max-width: 768px) {
  .navbar-wrapper {
    border-top: 1px solid var(--body-text-color);
  }
  body.night-mode .navbar-wrapper {
    border-top: 1px solid var(--body-text-color-nightmode);
  }
}


.container-fluid.mt20.sg-offcanvas {
  margin-top: 0px !important;
}


.stat-panel .stat-cell.narrow {
  color: var(--body-text-color);
}
.stat-panel .stat-cell.narrow a{
  color: var(--body-text-color);
}
body.night-mode .stat-panel .stat-cell.narrow {
  color: var(--body-text-color-nightmode);
}
body.night-mode .stat-panel .stat-cell.narrow a{
  color: var(--body-text-color-nightmode);
}



.col-md-4.col-lg-3.sg-offcanvas-sidebar {
  border-right: 1px solid var(--header-bg-color);
}

body.night-mode .col-md-4.col-lg-3.sg-offcanvas-sidebar {
  border-right: 1px solid var(--header-bg-color-nightmode);
}

/* Background color for main content area */
.col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--bg-bg-color) !important;
}

body.night-mode .col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--bg-bg-color-nightmode) !important;
}

/* Alert post see-more background color */
.alert.alert-post.see-more {
  background-color: var(--bg-bg-color) !important;
}

body.night-mode .alert.alert-post.see-more {
  background-color: var(--bg-bg-color-nightmode) !important;
}




.theiaStickySidebar .search-wrapper #search-history {
  
  background-color: var(--body-bg-color);
}

body.night-mode .theiaStickySidebar .search-wrapper #search-history {
  
  background: var(--body-bg-nightmode);
}

.theiaStickySidebar .search-wrapper #search-input {
  background-color: var(--body-bg-color);
  border-radius: 0px !important;
  color: var(--body-text-color);
  border: 0px !important;
}

body.night-mode .theiaStickySidebar .search-wrapper #search-input {
  background-color: var(--body-bg-nightmode);
  color: var(--body-text-color-nightmode);
}

body.night-mode .theiaStickySidebar .search-wrapper #search-input::placeholder {
  background-color: var(--body-bg-nightmode);
  color: var(--body-text-color-nightmode);
}



body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-add {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-cancel {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode);
}

/* Additional night mode styles for friend request buttons in dropdown menus */
body.night-mode .dropdown-widget .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode);
}

body.night-mode .dropdown-widget .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode);
}

/* General night mode styles for friend request buttons */
body.night-mode .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .theiaStickySidebar .card .card-body.with-list .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-add{
  color: var(--body-text-color-nightmode);
}





.posts-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 33px;
}

/* .btn-group.btn-group-sm {
  margin-left: 10px;
} */

.btn-toggle-view .svg-container {
  color: var(--side-menu-icon-inactive) !important;
}

.btn-toggle-view.active .svg-container {
  color: var(--side-menu-icon-active) !important;
}

body.night-mode .btn-toggle-view .svg-container {
  color: var(--side-menu-icon-inactive-nightmode) !important;
}

body.night-mode .btn-toggle-view.active .svg-container {
  color: var(--side-menu-icon-active-nightmode) !important;
}



.x-form.publisher {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 18px;
}

@media (max-width: 768px) {
  .x-form.publisher {
    padding-left: 0px;
  }
}

.dropdown-menu.dropdown-widget.dropdown-search.js_dropdown-keepopen {
  width: 0 !important;
}


/* Override Bootstrap CSS variables for theiaStickySidebar cards */
.theiaStickySidebar .card {
  --bs-card-bg: var(--body-bg-color) !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card {
  --bs-card-bg: var(--body-bg-color-nightmode) !important;
  background-color: var(--body-bg-color-nightmode) !important;
}

/* Override for side menu card to use header-bg-color instead of body-bg-color */
.theiaStickySidebar .card.main-side-nav-card,
.csmenu .main-side-nav-card {
  --bs-card-bg: var(--header-bg-color) !important;
  background-color: var(--header-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card.main-side-nav-card,
body.night-mode .csmenu .main-side-nav-card {
  --bs-card-bg: var(--header-bg-color-nightmode) !important;
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Maximum specificity override for card-header to prevent Bootstrap from overriding */
.theiaStickySidebar .card .card-header,
.theiaStickySidebar .card[id] .card-header,
.col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar .card .card-header {
  --bs-card-bg: var(--body-bg-color) !important;
  background-color: var(--body-bg-color) !important;
  background: var(--body-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card .card-header,
body.night-mode .theiaStickySidebar .card[id] .card-header,
body.night-mode .col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar .card .card-header {
  --bs-card-bg: var(--body-bg-color-nightmode) !important;
  background-color: var(--body-bg-color-nightmode) !important;
  background: var(--body-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode) !important;
}

/* Card with d-grid card-body needs border-radius on parent card */
.card:has(.card-body.d-grid) {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* More specific targeting for blog sidebar cards */
#blogside .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

body.night-mode #blogside .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

#blogside .card .card-body.d-grid {
  border-radius: 12px !important;
}

/* Ensure parent card has border-radius and overflow for blog sidebar */
#blogside .card:has(.card-body.d-grid),
#blogside .card .card-body.d-grid {
  border-radius: 12px !important;
}

#blogside .card:has(.card-body.d-grid) {
  overflow: hidden !important;
}

/* Fallback for browsers that don't support :has() */
#blogside .card > .card-body.d-grid {
  border-radius: 12px !important;
}

/* Ensure the card-body.d-grid has a background so border-radius is visible */
#blogside .card .card-body.d-grid {
  background-color: var(--body-bg-color) !important;
  border-radius: 12px !important;
}

body.night-mode #blogside .card .card-body.d-grid {
  background-color: var(--body-bg-nightmode) !important;
}

/* Cards with bg-transparent headers in blog sidebar */
#blogside .card:has(.card-header.bg-transparent) {
  border-radius: 12px !important;
  overflow: hidden !important;
}

#blogside .card .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
  background-color: var(--body-bg-color) !important;
}

#blogside .card:has(.card-header.bg-transparent) .card-body {
  border-radius: 0 0 12px 12px !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode #blogside .card .card-header.bg-transparent {
  background-color: var(--body-bg-nightmode) !important;
}

body.night-mode #blogside .card:has(.card-header.bg-transparent) .card-body {
  background-color: var(--body-bg-nightmode) !important;
}

/* Fallback for browsers that don't support :has() */
#blogside .card > .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
  background-color: var(--body-bg-color) !important;
}

#blogside .card > .card-header.bg-transparent + .card-body {
  border-radius: 0 0 12px 12px !important;
  background-color: var(--body-bg-color) !important;
}

.card .card-body .d-grid .btn.btn-outline-primary {
  background-color: var(--header-bg-color) !important;
  border: 1px solid var(--header-bg-color) !important;
  border-radius: 12px !important;
}

.card .card-body .d-grid .btn.btn-outline-primary:hover {
  background-color: var(--body-text-color) !important;
}


body.night-mode .card .card-body .d-grid .btn.btn-outline-primary {
  background-color: var(--header-bg-color-nightmode) !important;
  border: 1px solid var(--header-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode);
}

body.night-mode .card .card-body .d-grid .btn.btn-outline-primary:hover {
  background-color: var(--body-text-color-nightmode) !important;
  color: var(--header-bg-color-nightmode);
}



.ui-box .user-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--body-bg-color);
  padding-top: 10px;
  margin-top: auto;
}

body.night-mode .ui-box .user-actions {
  border-top: 1px solid var(--body-bg-nightmode);
}

.ui-box .button-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px; 
  position: relative;
}

.ui-box .button-wrapper .btn {
  flex: 1;
  margin: 0;
  border: none; 
  position: relative;
}

.ui-box .button-wrapper .btn:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -5px; 
  height: 100%;
  width: 1px;
  background-color: var(--body-bg-color);
}

body.night-mode .ui-box .button-wrapper .btn:not(:last-child)::after {
  background-color: var(--body-bg-nightmode);
}

.ui-box .single-button {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 100%; 
}


@media (max-width: 768px) {
  .d-flex.align-items-center.ml-auto {
      visibility: hidden;
  }
}

@media (min-width: 1017px) and (max-width: 1300px) {
  .top-filters-index {
    margin-bottom: -30px !important;
  }
  
  .posts-filter {
    margin-top: 10px;
  }
}


.col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav .mb20 {
  visibility: hidden;
  margin-top: -50px;
}

.col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav {
  background-color: var(--body-bg-color);
}

body.night-mode .col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav {
  background-color: var(--body-bg-nightmode);
}



.publisher-mini .form-label {
  color: var(--body-text-color);
}

body.night-mode .publisher-mini .form-label {
  color: var(--body-text-color-nightmode);
}


body.night-mode .btn-social-icon.btn-sm {
  color: #FFF;
}


body.night-mode .modal-header.btn-close {
  color: var(--body-text-color-nightmode);
}


body.night-mode .user-actions.mt10 .button-wrapper .btn.btn-sm.js_chat-start .svg-container.main-icon2 {
  color: var(--body-text-color-nightmode) !important;
  fill: var(--body-text-color-nightmode) !important;
}


.btn-social-icon {
  background-color: black;
  color: white;
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.btn-social-icon i {
  color: white;
}

.btn-social-icon:hover {
  background-color: #333;
}

body.night-mode .btn-social-icon {
  background-color: white;
  color: black;
}

body.night-mode .btn-social-icon i {
  color: black;
}

body.night-mode .btn-social-icon:hover {
  background-color: #f0f0f0;
}


.js_scroller {
  min-height: 305px;
}



.btn-group.js_publisher-privacy .btn.dropdown-toggle {
  padding: 0px 5px 0px 0px;
  border:0px;
}

.btn-group.js_publisher-privacy .btn.dropdown-toggle.show {
  border: 0px;
}


.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

#search-bar {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  transform: translateY(-50%);
  transition: width 0.3s ease-in-out, right 0.3s ease-in-out;
  white-space: nowrap;
  overflow: visible;
  padding: 5px;
  z-index: 1000;
  width: 0;
}

.search-container.open #search-bar {
  display: block;
  width: 264px;  
  right: 0;
  top: 20px;
}

.search-container.open #search-bar .search-wrapper.d-none.d-md-block {
  top: 24px;
}

#search-icon {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  z-index: 1001;
  padding: 5px;
  position: absolute;
  right: 0;
  top: 20px;
  transform: translateY(-50%);
}

.search-container.open #search-icon {
  transform: translateY(-50%) translateX(-235px); 
}

@media (max-width: 1250px) {
  #logo {
    transition: margin-left 0.3s ease-in-out;
  }

  .search-container.open #logo {
    margin-left: -264px;
  }
}





body.night-mode .btn-group.js_publisher-privacy .btn.dropdown-toggle {
  color: var(--body-text-color-nightmode);
}


.sidebar-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  position: relative; 
}
.sidebar-footer {
  padding: 10px 15px;
  position: relative; 
  width: 500px; 
  max-width: 500px; 
  box-sizing: border-box;
}
.footer-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-right: 10px;
}
.footer-links a {
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}


.progress-bar {
  background-color: var(--body-text-color);
}

body.night-mode .progress-bar {
  background-color: var(--link-color-nightmode) !important;
}


.profile-badges {
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.profile-badge {
  margin-right: 10px;
}

.profile-badge:last-child {
  margin-right: 0;
}


.post-colored.custom-scrollbar .post-colored-text-wrapper.js_scroller .post-text {
  background: transparent !important;
}

.x-image#profile_designer_images {
  width: 167px;
  height: 167px;
}



.img-stretch {
  height: 250px; 
  object-fit: cover; 
  object-position: center;
  width: 100%; 
}

.carousel-control-prev,
.carousel-control-next {
  top: 50%; 
  transform: translateY(-50%);
}

.product-meta {
  margin-bottom: 10px;
}

.product-meta .price {
  font-weight: bold;
  color: var(--body-text-color);
}

.product-info .product-meta.title .title {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--body-text-color);
}

body.night-mode .product-meta .price {
  color: var(--body-text-color-nightmode);
}

body.night-mode .product-info .product-meta.title .title {
  color: var(--body-text-color-nightmode);
}


.card.product {
  border: 1px solid var(--header-bg-color);
}

body.night-mode .card.product {
  border: 1px solid var(--header-bg-color-nightmode);
}

body.night-mode .btn-group-text {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-text:hover {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-text:active {
  color: var(--body-text-color-nightmode);
}

body.night-mode .dropdown-toggle::after {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-icon.fa.fa-list.mr10 {
  color: var(--body-text-color-nightmode);
}

/* Schedule dropdown styling - Bootstrap native dropdown */
.schedule-dropdown-menu {
  min-width: 280px;
  padding: 15px;
  background-color: var(--body-bg-color);
  border: none;
  border-radius: 0;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}

body.night-mode .schedule-dropdown-menu {
  background-color: var(--body-bg-nightmode);
  border: none;
  color: #fff;
}

.schedule-dropdown-menu .dropdown-header {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 10px;
  padding: 0;
}

body.night-mode .schedule-dropdown-menu .dropdown-header {
  color: var(--body-text-color-nightmode);
}

.schedule-dropdown-menu .dropdown-item-text {
  padding: 0;
}

.schedule-dropdown-menu .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  background-color: #fff;
  color: #495057;
  font-size: 14px;
}

body.night-mode .schedule-dropdown-menu .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

.schedule-dropdown-menu .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

body.night-mode .schedule-dropdown-menu .form-control:focus {
  border-color: var(--body-text-color-nightmode);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

/* Make the schedule button group positioned relatively */
.js_publisher-schedule {
  position: relative;
}

/* Hide the fake wrapper element completely by default */
#schedule-toggle-wrapper {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Allow the wrapper to be shown when scheduling is active - but keep it invisible */
#schedule-toggle-wrapper.schedule-active {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure schedule dropdown doesn't go off-screen */
.schedule-dropdown-menu {
  max-width: calc(100vw - 20px);
  left: auto !important;
  right: 0 !important;
}

@media (max-width: 768px) {
  .schedule-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 40px);
  }
}

/* Schedule button styling - matches privacy/scenes buttons */
.js_publisher-schedule-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.375rem 0.75rem;
  text-decoration: none !important;
}

.js_publisher-schedule-toggle:hover {
  text-decoration: none !important;
}

.js_publisher-schedule-toggle:focus {
  text-decoration: none !important;
}

.js_publisher-schedule-toggle .btn-group-icon {
  color: #000000;
}

body.night-mode .js_publisher-schedule-toggle .btn-group-icon {
  color: #ffffff;
}

.js_publisher-schedule-toggle .btn-group-text {
  color: #000000;
}

body.night-mode .js_publisher-schedule-toggle .btn-group-text {
  color: #ffffff;
}

/* Schedule button active state - grey when active */
.js_publisher-schedule-toggle.active .btn-group-icon {
  color: #909090 !important;
}

body.night-mode .js_publisher-schedule-toggle.active .btn-group-icon {
  color: #909090 !important;
}

.js_publisher-schedule-toggle.active .btn-group-text {
  color: #909090 !important;
}

body.night-mode .js_publisher-schedule-toggle.active .btn-group-text {
  color: #909090 !important;
}

/* Article schedule button styling */
.js_article-schedule-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.375rem 0.75rem;
}

.js_article-schedule-toggle svg {
  fill: #000000;
}

body.night-mode .js_article-schedule-toggle svg {
  fill: #ffffff;
}

/* Article schedule button hover state */
.js_article-schedule-toggle:hover {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  --bs-btn-hover-color: inherit !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
}

.js_article-schedule-toggle:hover svg {
  fill: #000000 !important;
}

body.night-mode .js_article-schedule-toggle:hover svg {
  fill: #ffffff !important;
}

/* Article schedule button active state - keep transparent */
.js_article-schedule-toggle.active {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  --bs-btn-active-color: inherit !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-active-border-color: transparent !important;
}

.js_article-schedule-toggle.active svg {
  fill: #000000 !important;
}

body.night-mode .js_article-schedule-toggle.active svg {
  fill: #ffffff !important;
}

/* Schedule toggle wrapper styling */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 10px;
  margin-top: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: 0;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 6px 10px;
  background-color: #fff;
  color: #495057;
  font-size: 14px;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}


body.night-mode #group_15 .checkbox-buttons svg {
  fill: var(--top-menu-icons-nightmode);
}

body.night-mode .post-scene .text-muted {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .svg-container.mr10 svg,
body.night-mode .svg-container.mr10 svg * {
  fill: var(--top-menu-icons-nightmode) !important;
  color: var(--top-menu-icons-nightmode) !important;
}

#blogside {
  padding: 20px !important;
  padding-top: 0px !important;
  background-color: var(--bg-bg-color);
}

body.night-mode #blogside {
  background-color: var(--bg-bg-color-nightmode);
}

.article-wrapper.pb10 {
  background-color: var(--body-bg-color) !important;
  padding: 20px 33px 10px 33px !important;
}

body.night-mode .article-wrapper.pb10 {
  background-color: var(--body-bg-color-nightmode) !important;
}

.editorial-author__name-link,
.editorial-author__link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.editorial-author__link:hover {
  text-decoration: underline;
  color: var(--link-color);
}

body.night-mode .editorial-author__name-link,
body.night-mode .editorial-author__link {
  color: var(--link-color-nightmode);
}

body.night-mode .editorial-author__link:hover {
  color: var(--link-color-nightmode);
}

.editorial-list-item {
  background: var(--header-bg-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 0 0.75rem 1.5rem 0.75rem;
  transition: all 0.3s ease;
  border-radius: 12px !important;
}

body.night-mode .editorial-list-item {
  background: var(--header-bg-color-nightmode);
}

/* Blog sidebar editorial list items use bg-bg-color */
#blogside .editorial-list-item {
  background: var(--bg-bg-color) !important;
}

body.night-mode #blogside .editorial-list-item {
  background: var(--bg-bg-color-nightmode) !important;
}

/* Ensure editorial list item container and image have proper border-radius */
.editorial-list-item__container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.editorial-list-item__image {
  border-radius: 12px 0 0 12px !important;
  overflow: hidden !important;
}

.editorial-list-item__container--no-image {
  border-radius: 12px !important;
}

/* Input group border-radius for search forms */
.input-group .form-control {
  border-radius: 12px 0 0 12px !important;
}

.input-group .btn-search {
  border-radius: 0 12px 12px 0 !important;
}

/* Smaller badges in editorial author section */
.editorial-author .verified-badge,
.editorial-author .special-badge {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.editorial-author .verified-badge svg,
.editorial-author .verified-badge .svg-container svg {
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.editorial-author .verified-badge .svg-container {
  width: 15px !important;
  height: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.editorial-author .special-badge img {
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Align the inline-flex container to center badges with text */
.editorial-author div[style*="inline-flex"] {
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

/* Ensure the author name link has consistent line-height */
.editorial-author .editorial-author__name-link,
.editorial-author .editorial-author__link {
  line-height: 1.2 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Reduce gap between author name and time in editorial list items */
.editorial-list-item__meta {
  gap: 0.5rem !important;
}


.editorial-list-item__excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--body-text-color);
  margin: 0 0 1.25rem 0;
  flex-grow: 1;
}

body.night-mode .editorial-list-item__excerpt {
  color: var(--body-text-color-nightmode);
}

.editorial-list-item__title-link:hover {
  color: var(--link-color);
  text-decoration: none;
}

body.night-mode .editorial-list-item__title-link:hover {
  color: var(--link-color-nightmode);
}

.btn-blog,
.btn-blog.disabled,
.btn-blog:disabled,
.btn-blog:not(:disabled):not(.disabled).active,
.btn-blog:not(:disabled):not(.disabled):active,
.show>.btn-blog.dropdown-toggle {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-blog {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
}

.btn-blog:hover {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-blog.focus,
.btn-blog:focus {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 0 rgba(45, 206, 137, 0.5);
}

.btn-blog:not(:disabled):not(.disabled).active:focus,
.btn-blog:not(:disabled):not(.disabled):active:focus,
.show>.btn-blog.dropdown-toggle:focus {
  box-shadow: none;
}

body.night-mode .btn-blog,
body.night-mode .btn-blog.disabled,
body.night-mode .btn-blog:disabled,
body.night-mode .btn-blog:not(:disabled):not(.disabled).active,
body.night-mode .btn-blog:not(:disabled):not(.disabled):active,
body.night-mode .show>.btn-blog.dropdown-toggle {
  color: var(--body-bg-nightmode);
  border-color: var(--body-text-color-nightmode);
  background-color: var(--body-text-color-nightmode);
}

.btn-search,
.btn-search.disabled,
.btn-search:disabled,
.btn-search:not(:disabled):not(.disabled).active,
.btn-search:not(:disabled):not(.disabled):active,
.show>.btn-search.dropdown-toggle {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-search {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
}

.btn-search:hover {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-search.focus,
.btn-search:focus {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 0 rgba(247, 250, 252, 0.5);
}

.btn-search:not(:disabled):not(.disabled).active:focus,
.btn-search:not(:disabled):not(.disabled):active:focus,
.show>.btn-search.dropdown-toggle:focus {
  box-shadow: none;
}

body.night-mode .btn-search,
body.night-mode .btn-search.disabled,
body.night-mode .btn-search:disabled,
body.night-mode .btn-search:not(:disabled):not(.disabled).active,
body.night-mode .btn-search:not(:disabled):not(.disabled):active,
body.night-mode .show>.btn-search.dropdown-toggle {
  color: var(--body-bg-nightmode);
  border-color: var(--body-text-color-nightmode);
  background-color: var(--body-text-color-nightmode);
}

.data-container.small .data-avatar img {
  border-radius: 0 !important;
}

@media (min-width: 768px) {
  .data-container.small .data-avatar img {
    border-radius: 0 !important;
  }
}

.mention-avatar {
  border: 2px solid #e9eaee;
  transition: border-color 0.2s ease;
  border-radius: 0 !important;
  vertical-align: text-top;
  position: relative;
  top: -3px;
  margin-right: 0px !important;
}

.mention-avatar:hover {
  border-color: var(--primary-color);
}

.post-text .js_user-popover {
  text-decoration: none;
}

.post-text .js_user-popover a {
  text-decoration: none;
  color: var(--username-color);
}

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

/* Better spacing for albums grid */
.panel-photos .row .album-card {
  margin-bottom: 20px;
}

/* Main albums page styling - now handled by unified overlay styles above */

/* Main albums page album details - now handled by overlay styles above */

/* Main albums page tab navigation - now handled by unified styles above */

/* Main albums page card header */
.col-12 .card .card-header.with-icon.with-nav {
  border-bottom: none;
  padding: 20px 20px 0 20px;
}

.col-12 .card .card-body {
  padding: 20px;
}

/* Responsive adjustments for main albums page */
@media (max-width: 768px) {
  .col-12 .card .album-card {
    margin-bottom: 15px;
  }
  
  .col-12 .card .card-header.with-icon.with-nav {
    padding: 15px 15px 0 15px;
  }
  
  .col-12 .card .card-body {
    padding: 15px;
  }
  
  .col-12 .card .nav-tabs .nav-link {
    padding: 8px 15px;
    font-size: 0.9em;
  }
}

@media (max-width: 576px) {
  .col-12 .card .album-card {
    margin-bottom: 10px;
  }
  
  .col-12 .card .card-header.with-icon.with-nav {
    padding: 10px 10px 0 10px;
  }
  
  .col-12 .card .card-body {
    padding: 10px;
  }
  
  .col-12 .card .nav-tabs .nav-link {
    padding: 6px 12px;
    font-size: 0.85em;
  }
}

/* Instagram-style 3-column grid for photos */


/* Fix side panel photos background to match other side panel cards */
.theiaStickySidebar .card.panel-photos {
  background-color: #fff !important;
}

.theiaStickySidebar .card.panel-photos .card-body {
  background-color: #fff !important;
}

body.night-mode .theiaStickySidebar .card.panel-photos {
  background-color: var(--card-dark-color) !important;
}

body.night-mode .theiaStickySidebar .card.panel-photos .card-body {
  background-color: var(--card-dark-color) !important;
}

/* Instagram-style 3-column grid for photos (main photos page only) */
.col-12 .card.panel-photos .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.col-12 .card.panel-photos .row .col-6,
.col-12 .card.panel-photos .row .col-md-4,
.col-12 .card.panel-photos .row .col-lg-2 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-photos .row .pg_photo {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  overflow: hidden !important;
}

.col-12 .card.panel-photos .row .pg_photo:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Responsive adjustments for Instagram grid */
@media (max-width: 768px) {
  .col-12 .card.panel-photos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-photos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

/* 3-column grid for albums (main albums page only) */
.col-12 .card.panel-albums {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Videos panel border-radius */
.col-12 .card.panel-videos {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Connections panel border-radius */
.col-12 .card.panel-connections {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Followers panel border-radius */
.col-12 .card.panel-followers {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Followings panel border-radius */
.col-12 .card.panel-followings {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Instagram-style 3-column grid for videos (main videos page only) */
.col-12 .card.panel-videos .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

.col-12 .card.panel-videos .row .col-6,
.col-12 .card.panel-videos .row .col-md-4,
.col-12 .card.panel-videos .row .col-lg-3 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-videos .row .pg_video {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  overflow: hidden !important;
}

.col-12 .card.panel-videos .row .pg_video:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Responsive adjustments for videos grid */
@media (max-width: 768px) {
  .col-12 .card.panel-videos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-videos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

.col-12 .card.panel-albums .btn.btn-primary {
  border-radius: 12px !important;
}

.album-buttons .btn {
  border-radius: 12px !important;
}

.col-12 .card.panel-albums .row .col-sm-6,
.col-12 .card.panel-albums .row .col-md-4,
.col-12 .card.panel-albums .row .col-lg-3 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-albums .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Responsive adjustments for albums grid */
@media (max-width: 768px) {
  .col-12 .card.panel-albums .row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-albums .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

/* Side panel photos row gap */
.theiaStickySidebar .card .row .col-4 {
  margin-bottom: 4px !important;
}

/* Side panel photos grid layout - specific to photos only */
.theiaStickySidebar .card .row .col-4 .pg_photo {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
}

.theiaStickySidebar .card .row .col-4 .pg_photo:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Side panel photos uniform grid gaps - specific to photos only */
.theiaStickySidebar .card .row .col-4 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Only apply grid to rows that contain photos */
.theiaStickySidebar .card .row:has(.pg_photo) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin: 0 !important;
}

/* Date and time input icons in night mode - more specific targeting */
body.night-mode input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 1 !important;
}

body.night-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 1 !important;
}

body.night-mode input[type="date"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

body.night-mode input[type="time"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

/* Alternative approach for Firefox */
body.night-mode input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

body.night-mode input[type="time"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

/* Night mode focus state for schedule form controls */
body.night-mode #schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color-nightmode) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2) !important;
}

/* Keep publisher overlay when pickers are open */
.publisher.picker-open .publisher-overlay {
  display: block !important;
}

/* Responsive behavior for schedule wrapper */
@media (max-width: 768px) {
  #schedule-toggle-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Custom Date/Time Picker Styling */
.custom-date-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 20px;
  z-index: 10001;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}

.custom-time-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 20px;
  z-index: 10000;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}

body.night-mode .custom-date-picker {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

body.night-mode .custom-time-picker {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

.custom-date-picker .date-picker-header,
.custom-time-picker .time-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--body-text-color);
}

body.night-mode .custom-date-picker .date-picker-header,
body.night-mode .custom-time-picker .time-picker-header {
  color: var(--body-text-color-nightmode);
}

.custom-date-picker .prev-month,
.custom-date-picker .next-month {
  background: transparent;
  border: 1px solid var(--body-text-color);
  color: var(--body-text-color);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 0;
}

body.night-mode .custom-date-picker .prev-month,
body.night-mode .custom-date-picker .next-month {
  border-color: var(--body-text-color-nightmode);
  color: var(--body-text-color-nightmode);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.day-header {
  text-align: center;
  font-weight: 600;
  padding: 8px;
  color: var(--body-text-color);
  font-size: 12px;
}

body.night-mode .day-header {
  color: var(--body-text-color-nightmode);
}

.day {
  text-align: center;
  padding: 8px;
  cursor: pointer;
  color: var(--body-text-color);
  border: 1px solid transparent;
}

body.night-mode .day {
  color: var(--body-text-color-nightmode);
}

.day:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

body.night-mode .day:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.day.selected {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
}

body.night-mode .day.selected {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

.day.empty {
  cursor: default;
  opacity: 0.3;
}

/* Time picker styling */
.custom-time-picker .time-picker-body {
  text-align: center;
}

.time-lists {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.hour-list-container,
.minute-list-container {
  text-align: center;
}

.list-label {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--body-text-color);
  font-size: 14px;
}

body.night-mode .list-label {
  color: var(--body-text-color-nightmode);
}

.hour-list,
.minute-list {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0;
  background-color: var(--header-bg-color);
  width: 80px;
}

body.night-mode .hour-list,
body.night-mode .minute-list {
  border-color: #444;
  background-color: var(--header-bg-color-nightmode);
}

.time-item {
  padding: 10px;
  cursor: pointer;
  color: var(--body-text-color);
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
}

body.night-mode .time-item {
  color: var(--body-text-color-nightmode);
  border-bottom-color: #444;
}

.time-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

body.night-mode .time-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.time-item.selected {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
}

body.night-mode .time-item.selected {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

.custom-time-picker .time-display {
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0;
  color: var(--body-text-color);
}

body.night-mode .custom-time-picker .time-display {
  color: var(--body-text-color-nightmode);
}

.custom-time-picker .set-time {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  font-weight: 600;
}

body.night-mode .custom-time-picker .set-time {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

/* Date/Time picker selected items - remove blue */
input[type="date"]::-webkit-calendar-picker-indicator:focus,
input[type="time"]::-webkit-calendar-picker-indicator:focus {
  background-color: transparent !important;
}

/* Date picker dropdown styling */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--body-text-color) !important;
}

body.night-mode input[type="date"]::-webkit-datetime-edit-text,
body.night-mode input[type="date"]::-webkit-datetime-edit-month-field,
body.night-mode input[type="date"]::-webkit-datetime-edit-day-field,
body.night-mode input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--body-text-color-nightmode) !important;
}

/* Time picker styling */
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--body-text-color) !important;
}

body.night-mode input[type="time"]::-webkit-datetime-edit-text,
body.night-mode input[type="time"]::-webkit-datetime-edit-hour-field,
body.night-mode input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--body-text-color-nightmode) !important;
}

/* Date/Time picker dropdown selections - remove blue highlighting */
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: transparent !important;
}

/* Override browser's native blue selection in date/time pickers */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  background-color: transparent !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper:focus,
input[type="time"]::-webkit-datetime-edit-fields-wrapper:focus {
  background-color: transparent !important;
  outline: none !important;
}

/* Remove blue selection from date/time picker dropdowns */
input[type="date"]::-webkit-calendar-picker-indicator:active,
input[type="time"]::-webkit-calendar-picker-indicator:active {
  background-color: transparent !important;
}

/* Override any blue selection states */
input[type="date"]::-webkit-datetime-edit-text:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="time"]::-webkit-datetime-edit-text:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background-color: transparent !important;
  color: var(--body-text-color) !important;
  outline: none !important;
}

body.night-mode input[type="date"]::-webkit-datetime-edit-text:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-month-field:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-day-field:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-year-field:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-text:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-hour-field:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background-color: transparent !important;
  color: var(--body-text-color-nightmode) !important;
  outline: none !important;
}

/* More aggressive approach to override browser picker styling */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  background: none !important;
  color: inherit !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  background: none !important;
  color: inherit !important;
}

/* Try to override the actual picker popup */
input[type="date"]::-webkit-calendar-picker-indicator:active,
input[type="time"]::-webkit-calendar-picker-indicator:active {
  filter: none !important;
  background: none !important;
}

/* Alternative: Hide the native picker and use a custom one */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* Schedule toggle wrapper styling - square design */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  padding: 15px;
  margin-top: 10px;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0 !important;
  padding: 8px 12px;
  background-color: #fff;
  color: #495057;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}


/* Article Schedule System Styling */
/* ------------------------------- */

/* Article schedule toggle wrapper styling */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  padding: 15px;
  margin-top: 10px;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0 !important;
  padding: 8px 12px;
  background-color: #fff;
  color: #495057;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

body.night-mode #schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color-nightmode) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2) !important;
}

/* Date/Time input icons for articles */
#schedule-toggle-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
}

#schedule-toggle-wrapper input[type="date"]::-webkit-inner-spin-button {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

#schedule-toggle-wrapper input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

#search-history,
#search-results {
  border-radius: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Remove box shadow from list mode posts on mobile */
@media (max-width: 768px) {
  .js_posts_stream.list-view .post {
    box-shadow: none !important;
  }
}

/* Account Switcher: Verified badge spacing and size */
.modal-body .feeds-item .data-content .mt5 .account-switcher-badge {
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.modal-body .feeds-item .data-content .mt5 .account-switcher-badge .svg-container {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-body .feeds-item .data-content .mt5 .account-switcher-badge svg {
  width: 16px !important;
  height: 16px !important;
}

/* Account Switcher: Add Account button border radius */
.modal-body .account-switcher-add-btn {
  border-radius: 12px !important;
}


/* ------------------------------- */

:root {
  --body-bg-color: #FFFFFF;
  --body-bg-nightmode: #313131;
  --body-bg-color-nightmode: #313131;

  --bg-bg-color: #f2f2f2;
  --bg-bg-color-nightmode: #000000;

  --side-menu-icon-active: #000000;
  --side-menu-icon-active-nightmode: #03ffe1;

  --side-menu-icon-inactive: #909090;
  --side-menu-icon-inactive-nightmode: #FFFFFF;

  --link-color: #909090;
  --link-color-nightmode: #03ffe1;

  --username-color: #000000;
  --username-color-nightmode: #FFFFFF;

  --top-menu-icons: #000000;
  --top-menu-icons-nightmode: #FFFFFF;
  
  --header-bg-color: #f2f2f2;
  --header-bg-color-nightmode: #000000;

  --body-text-color: #000;
  --body-text-color-nightmode: #FFF;

  --cs-mint: #03ffe1;

  /*--body-font-family: Poppins, Helvetica, sans-serif;*/
  /* --body-font-family: Oswald, Helvetica, sans-serif; */
  --body-font-family: 'Roboto', Helvetica, sans-serif;

  /* Bootstrap CSS variable overrides */
  --bs-body-bg: var(--body-bg-color);
  --bs-card-bg: var(--body-bg-color);
}

body.night-mode {
  --bs-body-bg: var(--body-bg-nightmode);
  --bs-card-bg: var(--body-bg-color-nightmode);
}

/* SCHEDULE SYSTEM STYLING */
/* ------------------------------- */

/* Schedule toggle wrapper */
#schedule-toggle-wrapper {
  margin-top: 10px;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: #2d3748;
  border-color: #4a5568;
}

/* Schedule date input */
.js_publisher-schedule-date {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  background-color: #fff;
  color: #495057;
}

body.night-mode .js_publisher-schedule-date {
  background-color: #4a5568;
  border-color: #718096;
  color: #e2e8f0;
}

/* Schedule meta styling */
.publisher-meta[data-meta="schedule"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  background-color: #f8f9fa;
  border-radius: 8px;
  margin-bottom: 10px;
}

body.night-mode .publisher-meta[data-meta="schedule"] {
  background-color: #2d3748;
}

.publisher-meta[data-meta="schedule"] .form-label {
  font-weight: 600;
  margin-bottom: 0;
  color: #495057;
}

body.night-mode .publisher-meta[data-meta="schedule"] .form-label {
  color: #e2e8f0;
}

.publisher-meta[data-meta="schedule"] .form-text {
  font-size: 12px;
  color: #6c757d;
  margin-top: 2px;
}

body.night-mode .publisher-meta[data-meta="schedule"] .form-text {
  color: #a0aec0;
}

/* Schedule toggle switch */
.publisher-meta[data-meta="schedule"] .switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

.publisher-meta[data-meta="schedule"] .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.publisher-meta[data-meta="schedule"] .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
  border-radius: 24px;
}

.publisher-meta[data-meta="schedule"] .slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

.publisher-meta[data-meta="schedule"] input:checked + .slider {
  background-color: #5e72e4;
}

.publisher-meta[data-meta="schedule"] input:checked + .slider:before {
  transform: translateX(26px);
}

/* Schedule tool tab styling */
.publisher-tools-tab[data-tab="schedule"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.publisher-tools-tab[data-tab="schedule"]:hover {
  background-color: #f8f9fa;
}

body.night-mode .publisher-tools-tab[data-tab="schedule"]:hover {
  background-color: #2d3748;
}

.publisher-tools-tab[data-tab="schedule"].activated {
  background-color: #5e72e4;
  color: white;
}

.publisher-tools-tab[data-tab="schedule"].activated .main-icon {
  color: white !important;
  fill: white !important;
}

/* ================== */

/* MAIN */
/* ------------------------------- */

/* main-icons */
.main-icon,
.main-icon *,
.x-form-tools {
  color: var(--top-menu-icons) !important;
  fill: var(--top-menu-icons) !important;
}

body.night-mode .main-icon,
body.night-mode .main-icon *,
body.night-mode .x-form-tools {
  color: var(--top-menu-icons-nightmode) !important;
  fill: var(--top-menu-icons-nightmode) !important;
}

/* Networking Icons
.main-icon2,
.main-icon2 *,
.x-form-tools2 {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
}

body.night-mode .main-icon2,
body.night-mode .main-icon2 *,
body.night-mode .x-form-tools2 {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
} */

/* header-icons */
.header-icon,
.header-icon * {
  color: var(--top-menu-icons) !important;
  fill: var(--top-menu-icons) !important;
}

body.night-mode .header-icon,
body.night-mode .header-icon * {
  color: var(--top-menu-icons-nightmode) !important;
  fill: var(--top-menu-icons-nightmode) !important;
}

.alert {
  border-radius: 0;
}

.card {
  border-radius: 0;
}

.card-header,
.card-footer,
.card-footer:last-child {
  border-radius: 0 !important;
}

/* Add border-radius to card headers in blogs section */
.card .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
}

.card-footer.text-end {
  background-color: transparent !important;
}

.dropdown-menu {
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.dropdown-widget.dropdown-search {
  border-radius: 0;
}

.side-nav>li.active>a {
  border-radius: 0;
}

/* ================== */

/* IMPROVED PHOTOS & ALBUMS STYLING */
/* ------------------------------- */

/* Profile Photos Section */
.panel-photos .card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
}

body.night-mode .panel-photos .card {
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

  .panel-photos .card-body {
    padding: 20px !important;
  }

/* Photos Grid Improvements */
.panel-photos div[class^="col-"],
.panel-photos div[class*=" col-"] {
  padding: 3px !important;
  margin-bottom: 6px;
}

.pg_photo {
  border-radius: 0 !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  border: none;
}

.pg_photo:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .pg_photo {
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}

body.night-mode .pg_photo:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

/* Photo Action Buttons */
.pg_photo-delete-btn .btn-close {
  background: rgba(220, 53, 69, 0.9);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 12px;
  transition: all 0.3s ease;
  position: relative;
}

.pg_photo-delete-btn .btn-close::before {
  content: '×';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
  font-weight: bold;
  line-height: 1;
}

.pg_photo-delete-btn .btn-close:hover {
  background: rgba(220, 53, 69, 1);
  transform: scale(1.1);
}

.pg_photo-pin-btn {
  background: rgba(0, 0, 0, 0.7) !important;
  border-radius: 20px !important;
  padding: 4px 8px !important;
  font-size: 10px !important;
  transition: all 0.3s ease;
}

.pg_photo-pin-btn:hover {
  background: rgba(0, 0, 0, 0.9) !important;
  transform: scale(1.05);
}

.pg_photo-pin-btn.pinned {
  background: rgba(3, 255, 225, 0.9) !important;
  color: #000 !important;
}

.pg_photo-pin-btn.pinned:hover {
  background: rgba(3, 255, 225, 1) !important;
}

/* Albums Section */
.panel-photos .card .card-header.with-icon.with-nav {
  background: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding: 20px 20px 0 20px !important;
}

body.night-mode .panel-photos .card .card-header.with-icon.with-nav {
  background: transparent !important;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

/* Album Cards Improvements */
.album-card {
  position: relative;
  border: none !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  margin-bottom: 20px;
  padding: 0 !important;
}

.album-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .album-card {
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}

body.night-mode .album-card:hover {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.4);
}

.album-cover {
  display: block;
  width: 100%;
  height: 200px;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  border: none !important;
  border-radius: 0 !important;
  position: relative;
  transition: all 0.3s ease;
}

.album-cover:hover {
  transform: scale(1.02);
}

/* Album details overlay */
.album-details {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: white;
  padding: 20px 15px 15px 15px;
  transform: translateY(0);
  transition: all 0.3s ease;
  z-index: 2;
}

.album-card:hover .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

body.night-mode .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
}

body.night-mode .album-card:hover .album-details {
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.95));
}

.album-details a {
  color: white !important;
  font-weight: 600;
  font-size: 1.1em;
  text-decoration: none;
  display: block;
  margin-bottom: 5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.album-details a:hover {
  color: white !important;
  text-decoration: none;
}

body.night-mode .album-details a:hover {
  color: white !important;
}

.album-details div {
  color: rgba(255, 255, 255, 0.9) !important;
  font-size: 0.9em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.album-details .fa {
  color: rgba(255, 255, 255, 0.9) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}



/* Responsive adjustments for overlay */
@media (max-width: 768px) {
  .album-cover {
    height: 180px;
  }
  
  .album-details {
    padding: 15px 12px 12px 12px;
  }
  
  .album-details a {
    font-size: 1em;
  }
  
  .album-details div {
    font-size: 0.85em;
  }
}

@media (max-width: 576px) {
  .album-cover {
    height: 160px;
  }
  
  .album-details {
    padding: 12px 10px 10px 10px;
  }
  
  .album-details a {
    font-size: 0.95em;
  }
  
  .album-details div {
    font-size: 0.8em;
  }
}

/* Navigation Tabs */
.panel-photos .nav-tabs,
.col-12 .card .nav-tabs {
  border-bottom: none;
  margin-bottom: 0;
}

.panel-photos .nav-tabs .nav-link,
.col-12 .card .nav-tabs .nav-link {
  border: none;
  color: #6c757d;
  font-weight: 500;
  padding: 12px 20px;
  transition: all 0.3s ease;
}

.panel-photos .nav-tabs .nav-link:hover,
.col-12 .card .nav-tabs .nav-link:hover {
  color: #007bff;
  background: rgba(0, 123, 255, 0.05);
}

.panel-photos .nav-tabs .nav-link.active,
.col-12 .card .nav-tabs .nav-link.active {
  color: white !important;
  background: transparent !important;
  border-bottom: 2px solid white;
}

body.night-mode .panel-photos .nav-tabs .nav-link,
body.night-mode .col-12 .card .nav-tabs .nav-link {
  color: #adb5bd;
}

body.night-mode .panel-photos .nav-tabs .nav-link:hover,
body.night-mode .col-12 .card .nav-tabs .nav-link:hover {
  color: #03ffe1;
  background: rgba(3, 255, 225, 0.05);
}

body.night-mode .panel-photos .nav-tabs .nav-link.active,
body.night-mode .col-12 .card .nav-tabs .nav-link.active {
  color: white !important;
  border-bottom-color: white;
}

/* Empty State */
.panel-photos .text-center.text-muted {
  padding: 40px 20px;
  font-size: 16px;
  color: #6c757d;
}

body.night-mode .panel-photos .text-center.text-muted {
  color: #adb5bd;
}

/* See More Button */
.panel-photos .see-more {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 0;
  margin-top: 20px !important;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.panel-photos .see-more:hover {
  transform: translateY(-1px);
}

body.night-mode .panel-photos .see-more {
  border-color: rgba(255, 255, 255, 0.1);
}

body.night-mode .panel-photos .see-more:hover {
  /* Keep existing border color for night mode */
}

/* Responsive Improvements */
@media (max-width: 768px) {
  .panel-photos div[class^="col-"],
  .panel-photos div[class*=" col-"] {
    padding: 2px !important;
  }
  
  .panel-photos .card-body {
    padding: 15px !important;
  }
}

@media (max-width: 576px) {
  .pg_photo {
    border-radius: 0 !important;
  }
}

/* Additional Grid Improvements */
.panel-photos .row {
  margin: 0 -3px;
}

.panel-photos .row > [class*="col-"] {
  padding-left: 3px;
  padding-right: 3px;
}

/* Better spacing for albums grid */
.panel-photos .row .album-card {
  margin-bottom: 20px;
}

/* Improved photo loading states */
.pg_photo {
  position: relative;
  overflow: hidden;
}

/* Enhanced album cover hover effects */
.album-cover {
  position: relative;
}

.album-cover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.1);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.album-cover:hover::after {
  opacity: 1;
}

body.night-mode .album-cover::after {
  background: rgba(255, 255, 255, 0.1);
}


/* HEADER */
/* ------------------------------- */

.main-header {
  background: var(--header-bg-color);
  color: var(--link-color)
}

.main-header .search-wrapper .form-control {
  border-radius: 0;
  color: #000;
}

.navbar-wrapper .user-menu>img {
  border-radius: 7px;
}

.dropdown-item img {
  border-radius: 7px;
}

/* ================== */


/* FOOTER */
/* ------------------------------- */

.mini-footer .copyrights {
  border-bottom-color: #d9d9d9;
}

/* ================== */


/* LANDING PAGE */
/* ------------------------------- */

.landing-left {
  /*background: #032b25;*/
  background-position: center;
  background-image: url(../images/landing/welcome.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}

.landing-intro {
  visibility: hidden !important;
}

@media (min-width: 992px) {
  .landing-intro {
    padding-top: 300px;
  }
}

.landing-intro .logo-wrapper {
  background: #fff;
  color: #000;
  text-transform: uppercase;
  letter-spacing: 4px;
  font-size: 2.8rem;
}

.landing-intro .description-wrapper {
  text-transform: uppercase;
  letter-spacing: 4px;
  font-weight: 100;
  font-size: 2.4rem;
}

@media (min-width: 768px) {
  .landing-intro .logo-wrapper {
    font-size: 4rem;
  }

  .landing-intro .description-wrapper {
    font-size: 3.2rem;
  }
}

.landing-right {
  background: #000;
  color: #666;
}

.card-register {
  background: #000 !important;
  color: #666 !important;
}

.card-register .form-control {
  background: #000 !important;
  ;
  border: 0 none !important;
  ;
  border-bottom: 1px solid #72879a !important;
  ;
  border-radius: 0 !important;
  ;
  color: #72879a !important;
  ;
  padding: 20px 0 !important;
  ;
}

.card-register .form-control::placeholder {
  color: #72879a !important;
  ;
}

.card-register .form-control::-webkit-input-placeholder {
  color: #72879a !important;
  ;
}

.card-register .form-control::-moz-placeholder {
  color: #72879a !important;
  ;
}

.card-register .hr-heading-text:before,
.card-register .hr-heading-text:after {
  background: #72879a !important;
  ;
}

/* ================== */


/* LEFT PANEL */
/* ------------------------------- */

.main-left-panel {
  background: var(--header-bg-color);
  /*padding-top: 20px;*/
}

body.night-mode .main-left-panel {
  background: var(--header-bg-color-nightmode);
}

.main-side-nav-card {
  background: var(--header-bg-color) !important;
  color: var(--body-text-color) !important;
}

body.night-mode .main-side-nav-card {
  background: var(--header-bg-color-nightmode) !important;
}

.main-side-nav .static,
.main-side-nav a {
  margin-bottom: 10px;
}

body.night-mode .main-side-nav .static,
body.night-mode .main-side-nav a {
  color: var(--body-text-color-nightmode);
}

/* Mobile: Center nav but keep text left-aligned */
@media screen and (max-width: 767px) {
  .main-side-nav-card ul {
    width: fit-content;
    margin: 0 auto;
  }

  .main-side-nav .static,
  .main-side-nav a {
    text-align: left;
  }
}

@media screen and (min-width: 768px) {
  .main-side-nav .static,
  .main-side-nav a {
    width: 100%;
    padding: 10px 20px;
    text-align: center;
  }
}

@media screen and (min-width: 992px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 10px;
  }
}

/*@media screen and (min-width: 1400px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 20px;
  }
}*/

.main-side-nav a[data-bs-toggle=collapse]:after {
  display: none;
}

.main-side-nav a:hover,
.main-side-nav>li.active>a {
  /*background-color: var(--card-dark-hover);*/
  border-radius: 0 !important;
  color: var(--body-text-color-);
}

body.night-mode .main-side-nav a:hover,
body.night-mode .main-side-nav>li.active>a {
  color: var(--body-text-color-nightmode);
}


.main-side-nav-card .main-icon {
  width: 32px;
  height: 32px;
}

@media screen and (min-width: 1400px) {
  .main-side-nav-card .main-icon {
    width: 32px;
    height: 32px;
  }
}

/* Default color for all icons */
.main-side-nav-card .main-icon,
.main-side-nav-card .main-icon * {
  color: var(--side-menu-icon-inactive) !important; 
  fill: var(--side-menu-icon-inactive) !important; 
}

/* Active state color */
.main-side-nav > li.active > a .main-icon,
.main-side-nav > li.active > a .main-icon * {
  color: var(--side-menu-icon-active) !important; 
  fill: var(--side-menu-icon-active) !important; 
}

body.night-mode .main-side-nav-card .main-icon,
body.night-mode .main-side-nav-card .main-icon * {
  color: var(--side-menu-icon-inactive-nightmode) !important;
  fill: var(--side-menu-icon-inactive-nightmode) !important; 
}

/* Active state color */
body.night-mode .main-side-nav > li.active > a .main-icon,
body.night-mode .main-side-nav > li.active > a .main-icon * {
  color: var(--side-menu-icon-active-nightmode) !important; 
  fill: var(--side-menu-icon-active-nightmode) !important; 
}



.main-side-nav .user-image {
  width: fit-content;
  padding: 0;
  /*margin-top: -30px;*/
  /*margin-right: -1.375rem;*/
  /*margin-left: -1.375rem;*/
  text-align: center;
}

/*@media screen and (min-width: 1400px) and (max-width: 1500px) {
  .main-side-nav .user-image {
    margin-right: -0.950rem;
    margin-left: -0.950rem;
  }
}*/

.main-side-nav .user-image img {
  width: 50%;
  height: auto;
  margin-right: 0;
}

@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    width: 100%;
  }
}

/* ================== */


/* CENTER PANEL */
/* ------------------------------- */

.col-lg-8.main-center-panel,
.col-lg-12.main-center-panel {
  padding-top: 20px;
  background: var(--bg-bg-color);
  position: relative;
  z-index: 1;
}

body.night-mode .col-lg-8.main-center-panel,
body.night-mode .col-lg-12.main-center-panel {
  background: var(--bg-bg-color-nightmode);
}

/* Hide modal post close X */
.modal-post-close {
  display: none !important;
}

/* JS Posts Stream Grid */
.js_posts_stream.grid-view,
.js_posts_stream,
.grid-view {
  /* padding-top: 33px; */
  /* border-radius: 12px; */
  /* background-color: #fff !important; */
  /* box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.1); */
}

/* Post background styling */
.post {
  background: var(--header-bg-color) !important;
}

body.night-mode .post {
  background: var(--header-bg-color-nightmode) !important;
}

/* Fix white gap at bottom of posts in list view */
.js_posts_stream .post-body {
  margin-bottom: 0 !important;
}

/* Style the gap area of posts with header color using padding */
.js_posts_stream .post {
  background-color: var(--header-bg-color) !important;
  margin-bottom: 0 !important;
  padding-bottom: 20px !important; /* Use padding instead of margin */
}

/* Remove padding-bottom for grid mode and use body bg color */
.js_posts_stream.grid-view .post {
  padding-bottom: 0 !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode .js_posts_stream.grid-view .post {
  background-color: var(--body-bg-nightmode) !important;
}

/* List mode: Make .post same height as .post-body for text-only posts */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  padding-bottom: 0 !important;
  background-color: var(--body-bg-color) !important;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)),
body.night-mode .js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  background-color: var(--body-bg-nightmode) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Make post-body fill the post for text-only posts */
/* Exclude article posts with cover images */
.js_posts_stream.list-view .post:has(.post-media):not(:has(.post-media-image)) .post-body,
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-body {
  flex: 1;
}

/* Video posts - ensure post height matches video container exactly */
.js_posts_stream.grid-view .grid-item:has(.js_videojs) .post,
.js_posts_stream.grid-view .grid-item:has(.youtube-player) .post {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Optimize spacing for image-only posts (no text content) - Grid mode only */
/* Only apply negative margins to posts that have actual images/media (exclude URL previews with .post-media) */
/* Article posts with cover images should be treated as image posts */
.js_posts_stream.grid-view .post-body:has(.pg_wrapper),
.js_posts_stream.grid-view .post-body:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image),
.js_posts_stream.grid-view .post-body:has(.post-product-wrapper),
.js_posts_stream.grid-view .post-body:has(.youtube-player),
.js_posts_stream.grid-view .post-body:has(.js_videojs) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Ensure video container fills post-body exactly */
.js_posts_stream.grid-view .post-body:has(.youtube-player) .youtube-player,
.js_posts_stream.grid-view .post-body:has(.js_videojs) .js_videojs {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Proper spacing for text-only posts in grid mode (including URL preview posts) */
.js_posts_stream.grid-view .post-body:has(.post-media),
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 16px 12px 12px 12px !important;
}

/* Increased padding-top for text-only posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene),
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) {
  padding-top: 20px !important;
}

/* Add padding-top for OG image posts to position content below header pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image) {
  padding-top: 50px !important;
}

/* Increased padding-top for OG image posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
  padding-top: 65px !important;
}

/* Reduce padding-top for OG image posts on mobile */
@media (max-width: 768px) {
  .js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image) {
    padding-top: 15px !important;
  }
  
  .js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
    padding-top: 25px !important;
  }
}

/* Better styling for text content in text-only posts (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-text,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
}

/* Better styling for links in text-only posts (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-text a,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text a {
  color: var(--primary-color) !important;
  word-break: break-word !important;
}

/* Styling for colored pattern posts in text-only mode (grid mode) */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-colored,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-colored {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  min-height: 150px !important;
  padding: 16px !important;
}

/* Ensure text-only posts have minimum height for better appearance */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.grid-view .post:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.grid-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) {
  min-height: 180px !important;
}

/* Add margin to top of post-replace for text-only posts to bring text into view */
/* Exclude article posts with cover images */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)) .post-replace,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-replace {
  margin-top: 40px !important;
}

/* Increased margin-top for text-only posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene) .post-replace,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Increased margin-top for OG image posts with scene name in username pill */
.js_posts_stream.grid-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Left-align post-actions for text-only posts in grid mode */
.js_posts_stream.grid-view .post-body:has(.post-media) .post-actions,
.js_posts_stream.grid-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-actions {
  left: 12px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
}

/* Hide post-replace text for posts with images/videos - text should only appear in pill */
.grid-view .grid-item:has(.pg_wrapper) .post-replace .post-text,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.grid-view .grid-item:has(.post-product-wrapper) .post-replace .post-text,
.grid-view .grid-item:has(.youtube-player) .post-replace .post-text,
.grid-view .grid-item:has(.js_videojs) .post-replace .post-text,
.grid-view .post:has(.pg_wrapper) .post-replace .post-text,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.grid-view .post:has(.post-product-wrapper) .post-replace .post-text,
.grid-view .post:has(.youtube-player) .post-replace .post-text,
.grid-view .post:has(.js_videojs) .post-replace .post-text,
.list-view .post:has(.pg_wrapper) .post-replace .post-text,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-replace .post-text,
.list-view .post:has(.post-product-wrapper) .post-replace .post-text,
.list-view .post:has(.youtube-player) .post-replace .post-text,
.list-view .post:has(.js_videojs) .post-replace .post-text {
  display: none !important;
}

/* Hide post-text-normal-for-images in grid view (only show pill) */
.grid-view .grid-item:has(.pg_wrapper) .post-text-normal-for-images,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-text-normal-for-images,
.grid-view .grid-item:has(.post-product-wrapper) .post-text-normal-for-images,
.grid-view .grid-item:has(.youtube-player) .post-text-normal-for-images,
.grid-view .grid-item:has(.js_videojs) .post-text-normal-for-images,
.grid-view .post:has(.pg_wrapper) .post-text-normal-for-images,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-normal-for-images,
.grid-view .post:has(.post-product-wrapper) .post-text-normal-for-images,
.grid-view .post:has(.youtube-player) .post-text-normal-for-images,
.grid-view .post:has(.js_videojs) .post-text-normal-for-images {
  display: none !important;
}

/* Text pill for posts with both images and text - Grid mode only */
.grid-view .post-text-pill {
  position: absolute;
  bottom: 65px; /* Above the action buttons */
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  z-index: 5;
  max-height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* Improve touch responsiveness on mobile */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-text-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.grid-view .grid-item:has(.post-product-wrapper) .post-text-pill,
.grid-view .grid-item:has(.youtube-player) .post-text-pill,
.grid-view .grid-item:has(.js_videojs) .post-text-pill,
.grid-view .post:has(.pg_wrapper) .post-text-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.grid-view .post:has(.post-product-wrapper) .post-text-pill,
.grid-view .post:has(.youtube-player) .post-text-pill,
.grid-view .post:has(.js_videojs) .post-text-pill {
  opacity: 0;
  visibility: hidden;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-text-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.grid-view .grid-item:has(.youtube-player):hover .post-text-pill,
.grid-view .grid-item:has(.js_videojs):hover .post-text-pill,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-text-pill,
.grid-view .post:has(.pg_wrapper):hover .post-text-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.grid-view .post:has(.post-product-wrapper):hover .post-text-pill,
.grid-view .post-text-pill.expanded {
  opacity: 1;
  visibility: visible;
}

.grid-view .post-text-pill-content {
  color: #333 !important;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
}

/* Text pill expandable functionality - Grid mode only */
.grid-view .post-text-pill.expanded {
  max-height: 200px;
  overflow-y: auto;
}

.grid-view .post-text-pill.expanded .text-preview {
  display: none;
}

.grid-view .post-text-pill.expanded .text-full {
  display: block !important;
}

.grid-view .text-expand-indicator {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #666;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  display: none; /* Hide the indicator */
}

.grid-view .post-text-pill.expanded .text-expand-indicator {
  display: none;
}

/* Night mode for text pill - Grid mode only */
body.night-mode .grid-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

body.night-mode .grid-view .post-text-pill-content {
  color: #fff !important;
}

body.night-mode .grid-view .text-expand-indicator {
  color: #ccc;
  background: rgba(30, 30, 30, 0.8);
}

body.night-mode .js_posts_stream .post {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* List Mode: Apply all grid mode styling - like-for-like copy */

/* Video posts - ensure post height matches video container exactly */
.js_posts_stream.list-view .post:has(.js_videojs),
.js_posts_stream.list-view .post:has(.youtube-player) {
  padding: 0 !important;
  margin: 0 !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

/* Optimize spacing for image-only posts (no text content) - List mode */
/* Article posts with cover images should be treated as image posts */
.js_posts_stream.list-view .post-body:has(.pg_wrapper),
.js_posts_stream.list-view .post-body:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image),
.js_posts_stream.list-view .post-body:has(.post-product-wrapper),
.js_posts_stream.list-view .post-body:has(.youtube-player),
.js_posts_stream.list-view .post-body:has(.js_videojs) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 0 !important;
  height: 100% !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
}

/* Ensure video container fills post-body exactly */
.js_posts_stream.list-view .post-body:has(.youtube-player) .youtube-player,
.js_posts_stream.list-view .post-body:has(.js_videojs) .js_videojs {
  flex: 1 1 auto !important;
  margin: 0 !important;
}

/* Proper spacing for text-only posts in list mode (including URL preview posts) - Same as grid mode */
/* Exclude article posts with cover images (they should be treated as image posts) */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)),
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  padding: 16px 12px 12px 12px !important; /* Same padding as grid mode */
  position: relative !important; /* Make post-body a positioning context for post-actions */
}

/* Increased padding-top for text-only posts with scene name in username pill */
/* Exclude article posts with cover images */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene),
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) {
  padding-top: 20px !important;
}

/* Add padding-top for OG image posts to position content below header pill (list-view) */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image) {
  padding-top: 50px !important;
}

/* Increased padding-top for OG image posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
  padding-top: 65px !important;
}

/* Reduce padding-top for OG image posts on mobile (list-view) */
@media (max-width: 768px) {
  .js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image) {
    padding-top: 15px !important;
  }
  
  .js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) {
    padding-top: 25px !important;
  }
}

/* Better styling for text content in text-only posts (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-text,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text {
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 12px !important;
  line-height: 1.6 !important;
  font-size: 14px !important;
  color: var(--text-color) !important;
}

/* Better styling for links in text-only posts (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-text a,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-text a {
  color: var(--primary-color) !important;
  word-break: break-word !important;
}

/* Styling for colored pattern posts in text-only mode (list mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-colored,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-colored {
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  min-height: 150px !important;
  padding: 16px !important;
}

/* Ensure text-only posts have minimum height for better appearance */
.js_posts_stream.list-view .post:has(.post-media),
.js_posts_stream.list-view .post:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) {
  min-height: 180px !important;
}

/* Add margin to top of post-replace for text-only posts to bring text into view */
.js_posts_stream.list-view .post-body:has(.post-media) .post-replace,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)) .post-replace {
  margin-top: 40px !important;
}

/* Increased margin-top for text-only posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):not(:has(.post-media-image)):has(.post-header-pill-left .post-scene) .post-replace,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)):not(:has(.youtube-player)):not(:has(.js_videojs)):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Increased margin-top for OG image posts with scene name in username pill */
.js_posts_stream.list-view .post-body:has(.post-media):has(.post-media-image):has(.post-header-pill-left .post-scene) .post-replace {
  margin-top: 55px !important;
}

/* Text-only posts in list mode: post-actions still absolutely positioned but adjusted (same as grid mode) */
.js_posts_stream.list-view .post-body:has(.post-media) .post-actions,
.js_posts_stream.list-view .post-body:not(:has(.pg_wrapper)):not(:has(.post-media-image)):not(:has(.post-product-wrapper)):not(:has(.post-media)) .post-actions {
  left: 12px !important;
  transform: none !important;
  width: auto !important;
  max-width: none !important;
  /* Keep absolute positioning but ensure it's relative to post-body, not post */
  position: absolute !important;
  bottom: 12px !important;
}

/* Text pill for posts with both images and text - List mode */
.list-view .post-text-pill {
  position: absolute;
  bottom: 65px; /* Above the action buttons */
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px 16px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  z-index: 5;
  max-height: 120px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  touch-action: manipulation; /* Improve touch responsiveness on mobile */
  -webkit-tap-highlight-color: transparent; /* Remove tap highlight on mobile */
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-text-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-text-pill,
.list-view .post:has(.post-product-wrapper) .post-text-pill,
.list-view .post:has(.youtube-player) .post-text-pill,
.list-view .post:has(.js_videojs) .post-text-pill {
  opacity: 0;
  visibility: hidden;
}

.list-view .post:has(.pg_wrapper):hover .post-text-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-text-pill,
.list-view .post:has(.youtube-player):hover .post-text-pill,
.list-view .post:has(.js_videojs):hover .post-text-pill,
.list-view .post:has(.post-product-wrapper):hover .post-text-pill,
.list-view .post-text-pill.expanded {
  opacity: 1;
  visibility: visible;
}

.list-view .post-text-pill-content {
  color: #333 !important;
  font-size: 14px;
  line-height: 1.4;
  margin: 0;
  word-wrap: break-word;
}

/* Text pill expandable functionality - List mode */
.list-view .post-text-pill.expanded {
  max-height: 200px;
  overflow-y: auto;
}

.list-view .post-text-pill.expanded .text-preview {
  display: none;
}

.list-view .post-text-pill.expanded .text-full {
  display: block !important;
}

.list-view .text-expand-indicator {
  position: absolute;
  bottom: 8px;
  right: 12px;
  color: #666;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.8);
  padding: 2px 6px;
  border-radius: 4px;
  pointer-events: none;
  display: none; /* Hide the indicator */
}

.list-view .post-text-pill.expanded .text-expand-indicator {
  display: none;
}

/* Night mode for text pill - List mode */
body.night-mode .list-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important; /* Glass effect */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
}

body.night-mode .list-view .post-text-pill-content {
  color: #fff !important;
}

body.night-mode .list-view .text-expand-indicator {
  color: #ccc;
  background: rgba(30, 30, 30, 0.8);
}

/* Hide normal text for images in list mode (use text pill instead) */
.list-view .post-text-normal-for-images {
  display: none !important;
}

.grid-view .post-text-normal-for-images {
  display: none !important;
}

/* List Mode: Modern Overlay Design */
.list-view .post {
  position: relative;
  overflow: hidden;
  z-index: 1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .list-view .post {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Hide original post header in list mode */
.list-view .post-header {
  display: none !important;
}

/* List Mode: Hide text labels for action buttons */
.list-view .reaction-btn-name,
.list-view .action-btn span {
  display: none !important;
}

/* List Mode: Adjust action button spacing - left aligned */
.list-view .post-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: auto;
}

.list-view .action-btn {
  flex: none;
  text-align: center;
  padding: 0;
  min-width: 44px;
  max-width: 44px;
}

/* List Mode: Override existing min-width rules */
.list-view .action-btn.reactions-wrapper,
.list-view .action-btn.js_comment,
.list-view .action-btn.share-btn {
  min-width: 44px !important;
  flex: none !important;
}

/* List Mode: Style action icons */
.list-view .action-icon {
  width: 20px !important;
  height: 20px !important;
}

.list-view .reaction-btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* List Mode: Ensure comment button is visible */
.list-view .js_comment {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.list-view .js_comment .action-icon {
  display: block !important;
  visibility: visible !important;
}

/* List Mode: Override x-hidden class for comment button */
.list-view .js_comment.x-hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Left Pill - User Info (List Mode) */
.list-view .post-header-pill-left {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  max-width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.list-view .post-header-pill-left .post-avatar {
  background: transparent !important;
}

/* Ensure all child elements are transparent except avatar picture */
.list-view .post-header-pill-left *:not(.post-avatar-picture) {
  background: transparent !important;
}

.list-view .post-header-pill-left .post-meta {
  background: transparent !important;
}

.list-view .post-header-pill-left .post-avatar a.post-avatar-picture {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 7px !important;
}

/* Additional specificity to override any conflicting rules */
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture,
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture:before,
.list-view .post-header-pill-left .post-avatar a.post-avatar-picture:after {
  border-radius: 7px !important;
}

.list-view .post-header-pill-left .post-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0px 0px 0 0px !important;
}

.list-view .post-header-pill-left .post-meta .post-author {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.list-view .post-header-pill-left .post-meta .post-author a {
  color: #333;
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .post-author a:hover {
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.list-view .post-header-pill-left .post-meta .verified-badge .svg-container {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.list-view .post-header-pill-left .post-meta .verified-badge svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--primary-color);
  vertical-align: middle;
}

.list-view .post-header-pill-left .post-meta .post-time {
  font-size: 10px;
  color: #666;
  margin: 0;
  line-height: 1;
}

.list-view .post-header-pill-left .post-meta .post-time a {
  color: #666;
  text-decoration: none;
}

.list-view .post-header-pill-left .post-meta .post-time a:hover {
  text-decoration: none;
}

/* Scene name in list view pill */
.list-view .post-header-pill-left .post-meta .post-scene {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  line-height: 1.2;
}

.list-view .post-header-pill-left .post-meta .post-scene span {
  color: #666;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-scene {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-scene span {
  color: #ccc;
}

/* Right Pill - Menu Options (List Mode) */
.list-view .post-header-pill-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 100;
  border-radius: 12px !important;
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-header-pill-right,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.list-view .post:has(.post-product-wrapper) .post-header-pill-right,
.list-view .post:has(.youtube-player) .post-header-pill-right,
.list-view .post:has(.js_videojs) .post-header-pill-right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .post-header-pill-right,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.list-view .post:has(.post-product-wrapper):hover .post-header-pill-right,
.list-view .post:has(.youtube-player):hover .post-header-pill-right,
.list-view .post:has(.js_videojs):hover .post-header-pill-right,
.list-view .post-header-pill-right .dropdown.open,
.list-view .post-header-pill-right:hover {
  opacity: 1;
  visibility: visible;
}

.list-view .post-header-pill-right .dropdown {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
}

/* Ensure all child elements are transparent */
.list-view .post-header-pill-right .dropdown * {
  background: transparent !important;
}

/* Hide expand icon in list view - it's now in the dropdown menu */
.list-view .post-header-pill-right .expand-post-icon {
  display: none !important;
}

.list-view .post-header-pill-right .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

.list-view .post-header-pill-right .fa-chevron-down::after {
  display: none !important;
}

/* YouTube controls pill styling (List Mode) */
.list-view .youtube-controls-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
  margin-right: 8px;
  z-index: 10;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s ease;
}

/* When moved below the header pill on small screens */
.list-view .youtube-controls-pill.youtube-controls-below {
  position: absolute !important;
  top: 36px !important;
  right: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

body.night-mode .list-view .youtube-controls-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  border: none !important;
}

.list-view .youtube-controls-pill * {
  background: transparent !important;
}

.list-view .youtube-controls-pill .youtube-caption-toggle,
.list-view .youtube-controls-pill .youtube-resize-toggle,
.list-view .youtube-controls-pill .video-caption-toggle,
.list-view .youtube-controls-pill .video-resize-toggle,
.list-view .youtube-controls-pill .image-caption-toggle,
.list-view .youtube-controls-pill .image-resize-toggle {
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.list-view .youtube-controls-pill .youtube-resize-toggle,
.list-view .youtube-controls-pill .video-resize-toggle,
.list-view .youtube-controls-pill .image-resize-toggle {
  margin-right: 0;
}

.list-view .youtube-controls-pill .youtube-caption-toggle:hover,
.list-view .youtube-controls-pill .youtube-resize-toggle:hover,
.list-view .youtube-controls-pill .video-caption-toggle:hover,
.list-view .youtube-controls-pill .video-resize-toggle:hover,
.list-view .youtube-controls-pill .image-caption-toggle:hover,
.list-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

.list-view .youtube-controls-pill .youtube-caption-toggle.active,
.list-view .youtube-controls-pill .youtube-resize-toggle.active,
.list-view .youtube-controls-pill .video-caption-toggle.active,
.list-view .youtube-controls-pill .video-resize-toggle.active,
.list-view .youtube-controls-pill .image-caption-toggle.active,
.list-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle {
  color: #ccc;
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle:hover,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

body.night-mode .list-view .youtube-controls-pill .youtube-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .youtube-resize-toggle.active,
body.night-mode .list-view .youtube-controls-pill .video-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .video-resize-toggle.active,
body.night-mode .list-view .youtube-controls-pill .image-caption-toggle.active,
body.night-mode .list-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

.list-view .post-header .dropdown {
  margin-left: auto;
}

.list-view .post-header .expand-post-icon {
  color: #666;
  font-size: 16px;
  margin-right: 8px;
}

.list-view .post-header .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

/* Bottom Action Circles - Left Aligned (List Mode) - Same as grid mode */
.list-view .post-actions {
  position: absolute !important;
  bottom: 12px !important;
  left: 12px !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 8px !important;
  z-index: 10 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  background: transparent !important;
}

/* Hide by default on image posts only, show on hover */
.list-view .post:has(.pg_wrapper) .post-actions,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-actions,
.list-view .post:has(.post-product-wrapper) .post-actions,
.list-view .post:has(.youtube-player) .post-actions,
.list-view .post:has(.js_videojs) .post-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .post-actions,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.list-view .post:has(.post-product-wrapper):hover .post-actions,
.list-view .post:has(.youtube-player):hover .post-actions,
.list-view .post:has(.js_videojs):hover .post-actions,
.list-view .post:has(.reactions-wrapper.active) .post-actions {
  opacity: 1;
  visibility: visible;
}

/* Hide YouTube controls pill by default on media posts, show on hover */
.list-view .post:has(.pg_wrapper) .youtube-controls-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.list-view .post:has(.post-product-wrapper) .youtube-controls-pill,
.list-view .post:has(.youtube-player) .youtube-controls-pill,
.list-view .post:has(.js_videojs) .youtube-controls-pill {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.list-view .post:has(.pg_wrapper):hover .youtube-controls-pill,
.list-view .post:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.list-view .post:has(.post-product-wrapper):hover .youtube-controls-pill,
.list-view .post:has(.youtube-player):hover .youtube-controls-pill,
.list-view .post:has(.js_videojs):hover .youtube-controls-pill {
  opacity: 1;
  visibility: visible;
}

/* Hide post-stats in list mode (numbers appear on buttons) */
.list-view .post-stats {
  visibility: hidden !important;
}

/* Remove post-stats height for image posts only in list mode to prevent layout shift */
.list-view .post:has(.pg_wrapper) .post-stats,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-stats,
.list-view .post:has(.post-product-wrapper) .post-stats,
.list-view .post:has(.youtube-player) .post-stats,
.list-view .post:has(.js_videojs) .post-stats {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.list-view .action-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Ensure all child elements are transparent except icons */
.list-view .action-btn *:not(.action-icon):not(.reaction-btn-icon):not(.reactions-container):not(.reactions-container *):not(.reaction-count):not(.comment-count):not(.share-count) {
  background: transparent !important;
}

.list-view .action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.list-view .action-btn .action-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

.list-view .action-btn .reaction-btn-icon {
  width: 20px;
  height: 20px;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Ensure inline-emoji inside reaction-btn-icon is properly sized */
.list-view .action-btn .reaction-btn-icon .inline-emoji {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

.list-view .action-btn .reaction-btn-icon .inline-emoji .emoji,
.list-view .action-btn .reaction-btn-icon .inline-emoji img,
.list-view .action-btn .reaction-btn-icon .inline-emoji svg {
  width: 20px !important;
  height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  transform: none !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  position: static !important;
  object-fit: contain !important;
}

/* Reaction count badge */
.list-view .action-btn .reaction-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Comment count badge */
.list-view .action-btn .comment-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Share count badge */
.list-view .action-btn .share-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Night mode - ensure count badges maintain same styling */
body.night-mode .list-view .action-btn .reaction-count,
body.night-mode .list-view .action-btn .comment-count,
body.night-mode .list-view .action-btn .share-count {
  background: #03FFE1 !important;
  color: black !important;
}

/* List Mode: Fix reactions container positioning and styling */
.list-view .reactions-wrapper {
  position: relative !important; /* Ensure relative positioning for absolute children */
}

/* Always hide original reactions container in list mode - we use flyout instead */
.list-view .reactions-container {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.list-view .action-btn.reactions-wrapper .reactions-container,
.list-view .reactions-wrapper .reactions-container,
.list-view .reactions-wrapper:hover .reactions-container,
.list-view .reactions-wrapper.active .reactions-container,
.list-view .action-btn.reactions-wrapper:hover .reactions-container,
.list-view .action-btn.reactions-wrapper.active .reactions-container,
.list-view .reactions-container:hover,
.list-view .reactions-container[style*="background"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* List mode reactions flyout styling - row layout on desktop, grid on mobile */
#list-reactions-flyout {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
}

#list-reactions-flyout .reactions_item {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  flex-shrink: 0 !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  overflow: visible !important;
}

/* Fix emoji positioning inside reactions_item for list flyout */
#list-reactions-flyout .reactions_item .emoji {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  top: auto !important;
  right: auto !important;
  transform: none !important;
  margin: 0 !important;
}

#list-reactions-flyout .reactions_item .emoji img,
#list-reactions-flyout .reactions_item .emoji svg {
  width: 28px !important;
  height: 28px !important;
  max-width: 28px !important;
  max-height: 28px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

#list-reactions-flyout .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

body.night-mode #list-reactions-flyout .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Mobile adjustments for list reactions flyout - 3x3 grid layout */
@media (max-width: 768px) {
  #list-reactions-flyout {
    /* CSS Grid will be set by JavaScript inline styles */
    display: grid !important;
  }
  
  #list-reactions-flyout .reactions_item {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    /* Remove flex properties when using grid */
    flex: none !important;
    grid-column: auto !important;
    grid-row: auto !important;
  }
  
  #list-reactions-flyout .reactions_item .emoji img,
  #list-reactions-flyout .reactions_item .emoji svg {
    width: 32px !important;
    height: 32px !important;
    max-width: 32px !important;
    max-height: 32px !important;
  }
}

.list-view .reactions-container .reaction-item {
  width: 50px !important;
  height: 50px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
}

.list-view .reactions-container .reaction-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  transform: scale(1.1) !important;
}

body.night-mode .list-view .reactions-container .reaction-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.list-view .reactions-container .reaction-item img,
.list-view .reactions-container .reaction-item svg {
  width: 40px !important;
  height: 40px !important;
  object-fit: contain !important;
}

/* Night mode styling for list view */
body.night-mode .list-view .post-header-pill-left {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .list-view .post-header-pill-right .dropdown {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
}

/* Hide original dropdown menu in list mode when flyout is active */
.list-view .action-dropdown-menu.list-dropdown-hidden,
.list-view .dropdown-menu.action-dropdown-menu.list-dropdown-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Action dropdown menu styling for list view */
.list-view .action-dropdown-menu,
.list-view .dropdown-menu.action-dropdown-menu {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

/* List dropdown flyout styling */
#list-dropdown-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

/* Grid dropdown flyout styling */
#grid-dropdown-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

/* Reactions flyouts */
#list-reactions-flyout,
#grid-reactions-flyout {
  position: fixed !important;
  z-index: 2147483647 !important;
  overflow: visible !important;
}

body.night-mode .list-view .action-dropdown-menu,
body.night-mode .list-view .dropdown-menu.action-dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-author {
  color: #fff;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-author a {
  color: #fff;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-time {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-left .post-meta .post-time a {
  color: #ccc;
}

body.night-mode .list-view .post-header-pill-right .expand-post-icon,
body.night-mode .list-view .post-header-pill-right .fa-chevron-down {
  color: #ccc;
}

body.night-mode .list-view .action-btn {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .list-view .action-btn .action-icon {
  color: #fff;
}

body.night-mode .list-view .action-btn .reaction-btn-icon {
  color: #fff;
}

body.night-mode .list-view .reactions-container {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.night-mode .list-view .action-btn.reactions-wrapper .reactions-container {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

body.night-mode .list-view .reactions-wrapper:hover .reactions-container[style*="background"],
body.night-mode .list-view .reactions-wrapper.active .reactions-container[style*="background"],
body.night-mode .list-view .action-btn.reactions-wrapper:hover .reactions-container[style*="background"],
body.night-mode .list-view .action-btn.reactions-wrapper.active .reactions-container[style*="background"] {
  background: rgba(30, 30, 30, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* List mode: Post body and media styling */
.list-view .post-body {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.list-view .post-media,
.list-view .post-media-image .image,
.list-view .post-media-image>div,
.list-view .post-footer,
.list-view .post-media-image .source,
.list-view .post-product-wrapper,
.list-view .post-funding-meta .funding-description,
.list-view .post-job-meta .job-description {
  border-radius: 12px;
  padding: 0 !important;
  margin: 0 !important;
}

/* List mode: Ensure OG images are properly sized and not cut off */
.list-view .post-media .post-media-image {
  width: 100% !important;
  display: block !important;
}

.list-view .post-media .post-media-image .image {
  width: 100% !important;
  min-height: 200px !important; /* Bigger than grid mode for list view */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 12px !important; /* All corners rounded */
}

/* Article posts with cover images - make the inner div fill container */
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image > div {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* Override inline padding-top: 50% */
  aspect-ratio: 2 / 1 !important; /* Default 2:1 aspect ratio for articles */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Fix source badge size on article posts in list mode - prevent it from inheriting width/height */
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image .source {
  width: 20px !important;
  height: 20px !important;
}

/* Ensure post-media container has bottom border-radius */
.list-view .post-media {
  border-radius: 12px !important; /* Full border-radius for container */
  overflow: hidden !important; /* Ensure child elements respect border-radius */
}

/* Ensure post-media-expand-wrapper is visible and functional in list mode */
.list-view .post-media-expand-wrapper {
  display: block !important;
  margin-top: 8px !important;
  padding: 0 12px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.list-view .post-media-expand-link {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* List mode: Make images/videos fill entire post height like grid mode */
/* Remove all padding from post for image/video posts (same as grid-item) */
.js_posts_stream.list-view .post:has(.pg_wrapper),
.js_posts_stream.list-view .post:has(.post-media-image):not(:has(.post-media)),
.js_posts_stream.list-view .post:has(.post-media):has(.post-media-image),
.js_posts_stream.list-view .post:has(.post-product-wrapper),
.js_posts_stream.list-view .post:has(.youtube-player),
.js_posts_stream.list-view .post:has(.js_videojs) {
  padding: 0 !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: var(--body-bg-color) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .js_posts_stream.list-view .post:has(.pg_wrapper),
body.night-mode .js_posts_stream.list-view .post:has(.post-media-image):not(:has(.post-media)),
body.night-mode .js_posts_stream.list-view .post:has(.post-media):has(.post-media-image),
body.night-mode .js_posts_stream.list-view .post:has(.post-product-wrapper),
body.night-mode .js_posts_stream.list-view .post:has(.youtube-player),
body.night-mode .js_posts_stream.list-view .post:has(.js_videojs) {
  background-color: var(--body-bg-nightmode) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Make images fill entire post-body (same as grid mode) */
/* Include article posts with cover images */
.list-view .post:has(.pg_wrapper) .post-media-image,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-media-image,
.list-view .post:has(.post-media):has(.post-media-image) .post-media-image {
  width: 100% !important;
  height: 100% !important;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.list-view .post:has(.pg_wrapper) .post-media-image img,
.list-view .post:has(.post-media-image):not(:has(.post-media)) .post-media-image img,
.list-view .post:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  flex: 1;
}

.list-view .post:has(.js_videojs) .js_videojs {
  width: 100% !important;
  height: 100% !important;
}

.list-view .post:has(.js_videojs) .js_videojs video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Make YouTube player and video player fill container */
.list-view .post:has(.youtube-player) .youtube-player,
.list-view .post:has(.js_videojs) .js_videojs {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Default fallback */
  display: block;
  width: 100% !important;
  height: auto !important; /* Override base CSS height: 0 */
  min-height: 200px !important; /* Fallback minimum height */
  margin: 0 !important;
  padding: 0 !important;
  padding-top: 0 !important; /* Override base CSS padding-top: 56% */
}

/* Ensure YouTube thumbnail image fills container */
.list-view .post:has(.youtube-player) .youtube-player img {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure YouTube play button is centered */
.list-view .post:has(.youtube-player) .youtube-player .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Style YouTube player wrapper to remove padding/margin in list mode */
/* Also style article post wrapper to remove padding/margin */
.list-view .post:has(.youtube-player) .mt10.plr15,
.list-view .post:has(.youtube-player) > .post-body > .mt10.plr15,
.list-view .post-body:has(.youtube-player) .mt10.plr15,
.list-view .post:has(.post-media):has(.post-media-image) .mt10.plr15,
.list-view .post:has(.post-media):has(.post-media-image) > .post-body > .mt10.plr15,
.list-view .post-body:has(.post-media):has(.post-media-image) .mt10.plr15,
.list-view .post:has(.js_videojs) .overflow-hidden,
.list-view .post:has(.js_videojs) > .post-body > .overflow-hidden,
.list-view .post-body:has(.js_videojs) .overflow-hidden {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Remove margin-top on .mt10 in list mode */
.list-view .mt10 {
  margin-top: 0 !important;
}

/* List mode: pg_wrapper styling for image galleries */
.list-view .post:has(.pg_wrapper) .pg_wrapper {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure clearfix works for multiple images */
.list-view .post:has(.pg_wrapper) .pg_wrapper.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* Fix reactions-stats-item background color */
.reactions-stats > .reactions-stats-item {
  background: var(--body-bg-color) !important;
}

body.night-mode .reactions-stats > .reactions-stats-item {
  background: var(--body-bg-nightmode) !important;
}

/* Fix post-media-meta background to match post */
.post-media-meta {
  background-color: var(--body-bg-color) !important;
}

body.night-mode .post-media-meta {
  background-color: var(--body-bg-nightmode) !important;
}

/* Fix post-media background to match post */
.post-media {
  background-color: var(--body-bg-color) !important;
}

body.night-mode .post-media {
  background-color: var(--body-bg-nightmode) !important;
}

/* Read more link for URL preview posts - List mode (same as grid) */
.list-view .post-media-expand-wrapper {
  margin-top: 8px;
  padding: 0 12px;
}

/* Read more link for URL preview posts in grid mode - matches readmore plugin styling */
.grid-view .post-media-expand-wrapper {
  margin-top: 8px;
  margin-bottom: 5px;
  padding: 0 12px;
}

/* Match readmore plugin link styling exactly - same as base a selector */
/* The readmore link (data-readmore-toggle) uses the base a selector which has color: var(--link-color) */
/* Use maximum specificity to override any other styles */
a.post-media-expand-link,
.list-view a.post-media-expand-link,
.list-view .post-media-expand-wrapper a.post-media-expand-link,
.list-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
.js_posts_stream.list-view a.post-media-expand-link,
.list-view .post-body .post-media-expand-wrapper a.post-media-expand-link,
.grid-view a.post-media-expand-link,
.grid-view .post-media-expand-wrapper a.post-media-expand-link,
.grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
.js_posts_stream.grid-view a.post-media-expand-link,
.grid-view .post-body .post-media-expand-wrapper a.post-media-expand-link {
  color: var(--link-color) !important;
  font-family: 'Roboto', sans-serif !important;
  font-size: 13px !important;
  font-weight: normal !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-block !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 0 10px 0 !important;
}

a.post-media-expand-link:hover,
.list-view a.post-media-expand-link:hover,
.list-view .post-media-expand-wrapper a.post-media-expand-link:hover,
.list-view .post-media .post-media-expand-wrapper a.post-media-expand-link:hover,
.js_posts_stream.list-view a.post-media-expand-link:hover,
.grid-view a.post-media-expand-link:hover,
.grid-view .post-media-expand-wrapper a.post-media-expand-link:hover,
.grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link:hover,
.js_posts_stream.grid-view a.post-media-expand-link:hover {
  text-decoration: underline !important;
  color: var(--link-color) !important;
  background: transparent !important;
}

body.night-mode a.post-media-expand-link,
body.night-mode .list-view a.post-media-expand-link,
body.night-mode .list-view .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .list-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .js_posts_stream.list-view a.post-media-expand-link,
body.night-mode .grid-view a.post-media-expand-link,
body.night-mode .grid-view .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .grid-view .post-media .post-media-expand-wrapper a.post-media-expand-link,
body.night-mode .js_posts_stream.grid-view a.post-media-expand-link {
  color: var(--link-color-nightmode) !important;
}

/* Add margin-bottom to readmore plugin links */
.list-view a[data-readmore-toggle],
.js_posts_stream.list-view a[data-readmore-toggle],
.list-view .post-text a[data-readmore-toggle],
.grid-view a[data-readmore-toggle],
.js_posts_stream.grid-view a[data-readmore-toggle],
.grid-view .post-text a[data-readmore-toggle] {
  margin-bottom: 10px !important;
  display: inline-block !important;
}

/* Style post-media-meta (hidden by default, shown via JS) */
.list-view .post-media-meta {
  padding: 12px;
  margin-top: 8px;
}

.list-view .post-media-meta .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: var(--text-color);
}

.list-view .post-media-meta .text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
  opacity: 0.8;
}

body.night-mode .list-view .post-media-meta .title {
  color: var(--text-color-nightmode);
}

body.night-mode .list-view .post-media-meta .text {
  color: var(--text-color-nightmode);
}

/* Style post-media-meta in grid mode (hidden by default, shown via JS) */
.grid-view .post-media-meta {
  padding: 12px;
  margin-top: 8px;
}

.grid-view .post-media-meta .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 6px;
  display: block;
  color: var(--text-color);
}

.grid-view .post-media-meta .text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-color);
  opacity: 0.8;
}

body.night-mode .grid-view .post-media-meta .title {
  color: var(--text-color-nightmode);
}

body.night-mode .grid-view .post-media-meta .text {
  color: var(--text-color-nightmode);
}

/* Night mode styling for list mode posts */
body.night-mode .list-view .post {
  /* background-color: var(--body-bg-nightmode) !important; */
}

body.night-mode .js_posts_stream.list-view .post-body {
  background-color: var(--body-bg-nightmode) !important;
}

body.night-mode .list-view .post-text {
  background-color: transparent !important;
  color: var(--text-color-nightmode) !important;
}

body.night-mode .list-view .post-text a {
  color: var(--primary-color) !important;
}

body.night-mode .list-view .post-text a:hover {
  color: var(--primary-color-hover) !important;
}

/* Night mode styling for grid-item new in list view */
body.night-mode .list-view .grid-item {
  background-color: var(--header-bg-color-nightmode) !important;
}

body.night-mode .js_posts_stream.grid-view, body.night-mode .js_posts_stream, body.night-mode .grid-view {
  /* background-color: var(--header-bg-color-nightmode) !important; */
}

/* Grid Mode: Fix reactions container positioning and styling */
.grid-view .reactions-wrapper {
  position: relative !important; /* Ensure relative positioning for absolute children */
}

.grid-view .reactions-container {
  position: fixed !important; /* Use fixed to avoid layout shifts and overflow issues */
  display: none !important; /* Hidden by default - force with !important */
  opacity: 0 !important; /* Start hidden - force with !important */
  visibility: hidden !important; /* Force with !important */
  pointer-events: none !important; /* Force with !important */
  z-index: 100000 !important; /* Ensure it appears above everything */
  background: rgba(255, 255, 255, 0.9) !important; /* More opaque for visibility */
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important; /* Match react button pill */
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important; /* Stronger shadow for visibility */
  border: 1px solid rgba(255, 255, 255, 0.3) !important; /* More visible border */
  width: 180px !important; /* Fixed width for 3x3 grid */
  height: 180px !important; /* Fixed height for 3x3 grid */
  overflow: hidden !important; /* Keep icons inside the panel */
  transition: opacity 0.2s ease, visibility 0.2s ease !important;
  /* Position (left/top) will be calculated and set via JavaScript */
}

/* More specific override for any conflicting styles */
.grid-view .action-btn.reactions-wrapper .reactions-container {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 180px !important;
  height: 180px !important;
}

/* Force visible reactions container - highest specificity */
/* BUT: Only when explicitly shown via hover/active, not by default */
/* Hide by default even if it has inline styles */
.grid-view .reactions-container[style*="background"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Only show when parent is hovered or active */
.grid-view .reactions-wrapper:hover .reactions-container[style*="background"],
.grid-view .reactions-wrapper.active .reactions-container[style*="background"],
.grid-view .action-btn.reactions-wrapper:hover .reactions-container[style*="background"],
.grid-view .action-btn.reactions-wrapper.active .reactions-container[style*="background"] {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  width: 180px !important;
  height: 180px !important;
  display: grid !important;
  opacity: 1 !important;
  visibility: visible !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-template-rows: repeat(3, 1fr) !important;
  gap: 2px !important; /* Tighter grid to maximize icon size */
  place-items: center !important;
}

.grid-view .reactions-wrapper:hover .reactions-container,
.grid-view .reactions-wrapper.active .reactions-container,
.grid-view .action-btn.reactions-wrapper:hover .reactions-container,
.grid-view .action-btn.reactions-wrapper.active .reactions-container,
.grid-view .reactions-container:hover {
  display: grid !important; /* Use grid layout */
  opacity: 1 !important; /* Show with smooth transition */
  visibility: visible !important; /* Ensure visibility */
  pointer-events: auto !important; /* Enable interaction */
  grid-template-columns: repeat(3, 1fr) !important; /* 3 columns */
  grid-template-rows: repeat(3, 1fr) !important; /* 3 rows */
  gap: 2px !important; /* Small gap between items */
  place-items: center !important; /* Center items in grid cells */
  /* Position and styling are set via JavaScript to prevent layout shifts */
}

.grid-view .reactions_item {
  position: static !important; /* Cancel absolute/animated positioning from default theme */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important; /* Slightly larger cells */
  height: 52px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

/* Cursor pointer for reactions in flyout */
#grid-reactions-flyout .reactions_item,
#grid-reactions-flyout [data-reaction],
#grid-reactions-flyout .js_react-post,
#list-reactions-flyout .reactions_item,
#list-reactions-flyout [data-reaction],
#list-reactions-flyout .js_react-post {
  cursor: pointer !important;
}

/* Ensure all child elements inside reactions_item allow click events to bubble up */
#grid-reactions-flyout .reactions_item *,
#grid-reactions-flyout .emoji,
#grid-reactions-flyout .emoji *,
#list-reactions-flyout .reactions_item *,
#list-reactions-flyout .emoji,
#list-reactions-flyout .emoji * {
  pointer-events: none !important;
}

/* But the reactions_item itself should receive clicks */
#grid-reactions-flyout .reactions_item,
#list-reactions-flyout .reactions_item {
  pointer-events: auto !important;
}

/* List mode reactions flyout styling */
#list-reactions-flyout .reactions_item {
  position: static !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  background: transparent !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
}

#list-reactions-flyout .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

body.night-mode #list-reactions-flyout .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.grid-view .reactions_item:hover {
  background: rgba(0, 0, 0, 0.1) !important;
  transform: scale(1.1) !important;
}

.grid-view .reactions_item .emoji {
  position: static !important; /* Ensure natural flow inside grid cell */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

.grid-view .reactions_item .emoji img {
  width: 46px !important; /* Larger to better fill the cell */
  height: 46px !important;
  object-fit: contain !important;
}

/* Ensure reactions can render outside grid tiles and footers */
/* REMOVED - This was causing layout shifts and breaking border-radius on images */
/* We'll use position: fixed on the reactions container instead to avoid needing overflow: visible */

/* Night mode for reactions container */
body.night-mode .grid-view .reactions-container {
  background: rgba(30, 30, 30, 0.90) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
}

body.night-mode .grid-view .reactions_item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

/* Ensure icons/SVGs in grid-reactions-flyout are white in night mode */
/* BUT: Don't apply if custom profile design is active (profileDesignPostsText is defined) */
body.night-mode #grid-reactions-flyout svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout svg *:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .reactions_item svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .reactions_item svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

body.night-mode #grid-reactions-flyout .emoji svg:not([data-profile-design]),
body.night-mode #grid-reactions-flyout .emoji svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Ensure icons/SVGs in list-reactions-flyout are white in night mode */
body.night-mode #list-reactions-flyout svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout svg *:not([data-profile-design]),
body.night-mode #list-reactions-flyout .reactions_item svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout .reactions_item svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

body.night-mode #list-reactions-flyout .emoji svg:not([data-profile-design]),
body.night-mode #list-reactions-flyout .emoji svg *:not([data-profile-design]) {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Also handle images with filter for night mode */
body.night-mode #list-reactions-flyout .emoji img {
  filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* Elevate wrapper only while visible (pairs with :has unclipping) */
@supports selector(:has(*)) {
  .grid-view .reactions-wrapper:hover,
  .grid-view .reactions-wrapper.active {
    z-index: 2147483647 !important;
  }
}

/* Fallback when :has is not supported: move the panel to viewport layer */
@supports not selector(:has(*)) {
  .grid-view .reactions-wrapper:hover .reactions-container,
  .grid-view .reactions-wrapper.active .reactions-container {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 2147483647 !important;
  }
}

/* Removed conflicting post-actions rule - post actions should be absolutely positioned to overlay content (defined earlier) */

/* Removed conflicting action-btn rule - action buttons should be circular pills in list mode (defined earlier) */

/* Post body and contents background */
.js_posts_stream .post-body {
  background-color: var(--body-bg-color) !important;
}

/* .js_posts_stream .post-body * {
  background-color: var(--body-bg-color) !important;
} */

body.night-mode .js_posts_stream .post-body {
  background-color: var(--body-bg-color-nightmode) !important;
}

/* Commented out - causing issues with night mode styling */
/*
body.night-mode .js_posts_stream .post-body * {
  background-color: var(--body-bg-color-nightmode) !important;
}
*/

/* Exceptions to maintain glass effect - make these transparent so parent glass shows through */
body.night-mode .grid-view .post-header-pill-left .post-meta,
body.night-mode .grid-view .post-header-pill-left .post-avatar,
body.night-mode .grid-view .post-header-pill-left *:not(.post-avatar-picture) {
  background-color: transparent !important;
}

body.night-mode .grid-view .post-header-pill-right,
body.night-mode .grid-view .post-header-pill-right * {
  background-color: transparent !important;
}

/* Exception for post-text-pill to maintain glass effect */
body.night-mode .grid-view .post-text-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .grid-view .post-text-pill * {
  background-color: transparent !important;
}

/* Edit Post Form Styling - Ensure it fits within post box */
.js_posts_stream .post-edit {
  padding: 12px !important;
  margin: 12px !important;
  background-color: var(--body-bg-color) !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
}

body.night-mode .js_posts_stream .post-edit {
  background-color: var(--body-bg-color-nightmode) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Edit post form textarea styling */
.js_posts_stream .post-edit .comment-form textarea {
  width: 100% !important;
  min-height: 80px !important;
  padding: 12px !important;
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  background-color: var(--body-bg-color) !important;
  color: var(--body-text-color) !important;
  font-size: 14px !important;
  line-height: 1.5 !important;
  resize: vertical !important;
}

body.night-mode .js_posts_stream .post-edit .comment-form textarea {
  background-color: var(--body-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Edit post form buttons styling */
.js_posts_stream .post-edit .text-end {
  margin-top: 12px !important;
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
}

.js_posts_stream .post-edit .btn {
  padding: 8px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  border-radius: 20px !important;
}

/* Ensure edit form is not hidden behind left pill - Grid View */
.js_posts_stream.grid-view .post-body:has(.post-edit) {
  padding-top: 100px !important;
}

.js_posts_stream.grid-view .post-body:has(.post-edit):has(.post-header-pill-left .post-scene) {
  padding-top: 130px !important;
}

/* Ensure edit form is not hidden behind left pill - List View */
.js_posts_stream.list-view .post-body:has(.post-edit) {
  padding-top: 100px !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit):has(.post-header-pill-left .post-scene) {
  padding-top: 130px !important;
}

/* When edit form is shown, ensure post-replace has enough margin */
.js_posts_stream.grid-view .post-body:has(.post-edit) .post-replace {
  margin-top: 0 !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit) .post-replace {
  margin-top: 0 !important;
}

/* Ensure all content in post-body when editing is visible and not behind left pill */
.js_posts_stream.grid-view .post-body:has(.post-edit) > *:not(.post-header-pill-left):not(.post-header-pill-right):not(.post-actions) {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.js_posts_stream.list-view .post-body:has(.post-edit) > *:not(.post-header-pill-left):not(.post-header-pill-right):not(.post-actions) {
  position: relative !important;
  z-index: 1 !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* Ensure post-edit itself is properly positioned and visible */
.js_posts_stream .post-body .post-edit {
  position: relative !important;
  z-index: 2 !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
}

/* Exception for post-actions container to maintain glass effect */
body.night-mode .grid-view .post-actions {
  background-color: transparent !important;
}

body.night-mode .grid-view .post-actions *:not(.action-btn) {
  background-color: transparent !important;
}

/* Exception for action buttons to maintain glass effect */
body.night-mode .js_posts_stream .post-body .action-btn,
body.night-mode .js_posts_stream .post-body .post-actions .action-btn,
body.night-mode .grid-view .post-body .action-btn,
body.night-mode .grid-view .post-actions .action-btn {
  background-color: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3) !important;
  border-radius: 50% !important;
}

.js_posts_stream.grid-view ul,
.js_posts_stream ul,
.grid-view ul {
  background-color: transparent !important;
  border-radius: 12px;
}

body.night-mode .js_posts_stream.grid-view,
body.night-mode .grid-view {
  /* background-color: var(--header-bg-color-nightmode) !important; */
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

/* List view should not have background color - keep it transparent */
body.night-mode .js_posts_stream.list-view,
body.night-mode .list-view {
  background-color: transparent !important;
}

body.night-mode .js_posts_stream.grid-view ul,
body.night-mode .js_posts_stream ul,
body.night-mode .grid-view ul {
  background-color: transparent !important;
}

/* Post avatar picture border radius */
.post-avatar-picture {
  border-radius: 12px !important;
}

/* Post container border radius - target all post elements */
.js_posts_stream .post,
.js_posts_stream .post-body,
.js_posts_stream .post-header,
.js_posts_stream .post-content,
.js_posts_stream .post-footer {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Main right panel padding */
.col-lg-4.js_sticky-sidebar.main-right-panel {
  padding-top: 20px;
}

/* Card mb-4 margin */
.card.mb-4 {
  margin-bottom: 33px !important;
}

/* Posts filter background */
.posts-filter.d-flex.align-items-center {
  background-color: #fff;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

body.night-mode .posts-filter.d-flex.align-items-center {
  background-color: var(--body-bg-nightmode);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3);
}

/* Add spacing between publisher and filters */
.top-filters-index {
  padding-top: 12px !important;
  margin-top: 12px !important;
}

/* Top filters index styling */
.top-filters-index a.active {
  text-decoration: none !important;
  color: var(--body-text-color) !important;
}

.top-filters-index a:not(.active) {
  color: var(--side-menu-icon-inactive) !important;
  transition: all 0.3s ease !important;
}

.top-filters-index a:not(.active):hover {
  color: var(--body-text-color) !important;
}

body.night-mode .top-filters-index a.active {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .top-filters-index a:not(.active) {
  color: var(--side-menu-icon-inactive-nightmode) !important;
}

body.night-mode .top-filters-index a:not(.active):hover {
  color: var(--body-text-color-nightmode) !important;
}

/* Posts filter icons margin */
.posts-filter .d-flex.align-items-center.ml-auto {
  margin-top: 12px !important;
}

/* Button styling within posts filter */
.posts-filter .d-flex.align-items-center.ml-auto .btn:first-child {
  border-radius: 12px 0px 0px 12px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn:nth-child(2) {
  border-radius: 0px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn.btn-sm.btn-toggle-view[data-view="grid"] {
  border-radius: 0px !important;
}

.posts-filter .d-flex.align-items-center.ml-auto .btn.btn-sm.btn-toggle-view[data-view="list"] {
  border-radius: 0px 12px 12px 0px !important;
}

/* Post button styling */
.btn.js_publisher-btn.js_publisher,
.publisher-footer .btn.js_publisher-btn.js_publisher,
.publisher-footer-buttons .btn.js_publisher-btn.js_publisher,
.d-grid .btn.js_publisher-btn.js_publisher {
  border-radius: 12px !important;
}

/* ================== */
/* RIGHT PANEL */
/* ------------------------------- */

.main-right-panel {
  background: var(--bg-bg-color);
  /*padding-left: 33px;
  padding-right: 75px;*/
}

body.night-mode .main-right-panel {
  background: var(--bg-bg-color-nightmode);
}

.main-right-panel.chat-panel {
  background: var(--body-bg-color);
}

.chat-sidebar {
  background: var(--header-bg-color);
  color: #666;
  bottom: 0;
  padding: 10px;
  top: 70px;
  right: 0;
  width: 75px;
}

body.night-mode .chat-sidebar {
  background: var(--header-bg-color-nightmode);
}

.chat-sidebar-content {
  top: 10px;
  right: 0;
  left: 0;
}

.chat-sidebar-footer {
  right: 10px;
}

.chat-avatar img {
  border-radius: 12px !important;
}

.chat-avatar .online-status {
  /*border-color: #000;*/
  right: -4px;
  bottom: -4px;
}

.btn-chat {
  background: transparent;
}

.chat-widget-head {
  border-radius: 12px 12px 0 0 !important;
}

/* Chat widget when opened */
.chat-widget.chat-box.opened {
  border-radius: 12px 12px 0 0 !important;
  overflow: hidden !important;
}

/* Glass effect for chat widget - day mode */
.chat-widget.chat-box {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Glass effect for chat widget - night mode */
body.night-mode .chat-widget.chat-box {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Make chat widget head and content transparent to show glass effect */
.chat-widget-head {
  background: transparent !important;
}

body.night-mode .chat-widget-head {
  background: transparent !important;
}

.chat-widget-content {
  background: transparent !important;
}

body.night-mode .chat-widget-content {
  background: transparent !important;
}

/* Make chat-to area transparent to show glass effect */
.chat-to {
  background: transparent !important;
}

body.night-mode .chat-to {
  background: transparent !important;
}

/* Make chat-form transparent to show glass effect */
.chat-form {
  background: transparent !important;
}

body.night-mode .chat-form {
  background: transparent !important;
  border-top-color: var(--body-bg-nightmode) !important;
}

/* Chat user card avatar */
.chat-user-card .avatar img {
  border-radius: 12px !important;
}

/* ================== */
/* RIGHT PANEL CARDS STYLING */
/* ------------------------------- */

/* Add rounded corners and drop shadow to all cards in the main-right-panel */
.col-lg-4.js_sticky-sidebar.main-right-panel .card,
.col-lg-3.js_sticky-sidebar.main-right-panel .card,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  overflow: hidden !important;
}

/* Ensure card headers have rounded top corners */
.col-lg-4.js_sticky-sidebar.main-right-panel .card .card-header,
.col-lg-3.js_sticky-sidebar.main-right-panel .card .card-header,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card .card-header {
  border-radius: 12px 12px 0 0 !important;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
}

/* Ensure card bodies have rounded bottom corners */
.col-lg-4.js_sticky-sidebar.main-right-panel .card .card-body,
.col-lg-3.js_sticky-sidebar.main-right-panel .card .card-body,
.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card .card-body {
  border-radius: 0 0 12px 12px !important;
  border-bottom-left-radius: 12px !important;
  border-bottom-right-radius: 12px !important;
}

/* Night mode support for the cards */
body.night-mode .col-lg-4.js_sticky-sidebar.main-right-panel .card,
body.night-mode .col-lg-3.js_sticky-sidebar.main-right-panel .card,
body.night-mode .col-lg-3.js_sticky-sidebar.main-right-panel.pt0 .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* ================== *
/* PUBLISHER GAP */
/* ------------------------------- */

/* Remove box shadow from publisher and margin-bottom */
.publisher {
  box-shadow: none !important;
  margin-bottom: 0 !important;
  background: var(--body-bg-color) !important;
}

body.night-mode .publisher {
  background: var(--body-bg-nightmode) !important;
}

/* X-form publisher styling */
.x-form.publisher {
  border-radius: 12px !important;
}

/* Card mb-4 border radius and shadow */
.card.mb-4 {
  margin-bottom: 33px !important;
  border-radius: 12px !important;
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .card.mb-4 {
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Horizontal gap between publisher and filters */

/* ================== *
/* CONTENT */
/* ------------------------------- */

.top-filters {
  display: flex;
  margin-bottom: 20px;
}

.top-filters a {
  color: var(--body-text-color);
  flex: 1;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  /*text-transform: uppercase;*/
  padding: 10px;
  text-align: center;
  border-right: 1px solid var(--body-text-color);
}

@media screen and (min-width: 768px) {
  .top-filters a {
    font-size: 20px;
    line-height: 26px;
  }
}

@media screen and (min-width: 992px) {
  .top-filters a {
    font-size: 22px;
    line-height: 34px;
  }
}

@media screen and (min-width: 1200px) {
  .top-filters a {
    font-size: 26px;
    line-height: 36px;
  }
}


body.night-mode .top-filters a {
  color: var(--body-text-color-nightmode);
}

.top-filters a.active {
  color: var(--body-text-color) !important;
	font-weight: 800 !important;
}

body.night-mode .top-filters a.active {
  color: var(--body-text-color-nightmode) !important;
	font-weight: 800 !important;
}

.top-filters a:last-child {
  border-right: 0 none;
}



/* Top Filters Index Start */

.top-filters-index {
  display: flex;
  justify-content: flex-start; 
  /*margin-bottom: 20px;*/
  /*max-width: 50%;  */
  margin-left: auto; 
  margin-right: auto;
  padding-left:33px;
  margin-bottom: -25px !important;
}

@media only screen and (max-width: 768px) {
  .top-filters-index {
    display: flex;
    flex-direction: column;
    justify-content: center;
    white-space: nowrap;
    padding-left:0px;
    align-items: center;
  }
  .top-filters-index a {
    font-size: 20px !important;
  }
  
  /* Hide create post/story dropdown and filter button on mobile */
  .top-filters-index > .dropdown,
  .top-filters-index .js_posts-filter {
    display: none !important;
  }
  
  /* Show scenes dropdown below filters on mobile - centered */
  .top-filters-index .js_scenes-filter {
    margin-top: 15px;
    margin-left: 0 !important;
    display: flex !important;
    justify-content: center;
    width: 100%;
    align-items: center;
  }
  
  .top-filters-index .js_scenes-filter .btn {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Hide the old JavaScript-created mobile dropdown */
  .mobile-scenes-dropdown {
    display: none !important;
  }
  
  /* Hide any scenes dropdown that's not in top-filters-index */
  .top-filters-index ~ .js_scenes-filter,
  .top-filters-index ~ .mobile-scenes-dropdown {
    display: none !important;
  }
}

/* Hide old scenes dropdown from posts-filter section (both desktop and mobile) */
.posts-filter .scenes-dropdown-filter,
.posts-filter .js_scenes-filter {
  display: none !important;
}


.top-filters-index a {
  color: var(--body-text-color);
  flex: 0 1 auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  padding-right: 30px;
  text-align: left; 
  max-width: 33%; 
}

@media screen and (min-width: 768px) {
  .top-filters-index a {
    font-size: 20px;
    line-height: 26px;
  }
}

@media screen and (min-width: 992px) {
  .top-filters-index a {
    font-size: 22px;
    line-height: 34px;
  }
}

@media screen and (min-width: 1200px) {
  .top-filters-index a {
    font-size: 26px;
    line-height: 36px;
  }
}

body.night-mode .top-filters-index a {
  color: var(--body-text-color-nightmode);
}

.top-filters-index a.active {
  color: #000000 !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-underline-offset: 10px; 
}

body.night-mode .top-filters-index a.active {
  color: var(--body-text-color-nightmode) !important;
  font-weight: 800 !important;
  text-decoration: underline;
  text-underline-offset: 10px; 
}

.top-filters-index a:last-child {
  border-right: 0 none;
}

/* Top Filters Index End */




.add-story .img {
  border-radius: 0;
}

.post {
  border-radius: 0;
}

.publisher {
  border-radius: 0;
}

.post-avatar-picture {
  border-radius: 0;
}

.data-avatar img {
  border-radius: 12px;
}

.post-avatar .online-dot {
  right: 6px;
  bottom: -6px;
  margin-right: 0;
  color: #03ffe1;
}

.post-avatar .online-dot.offline {
  color: #999;
}

.post-meta .dropdown .dropdown-toggle {
  border-radius: 0;
}

.post-actions .action-btn {
  border-radius: 0;
}

.pg_photo {
  border-radius: 0;
}

.user-box img {
  border-radius: 0;
}

.content-tabs {
  border-radius: 0;
  background: var(--bg-bg-color) !important;
}

body.night-mode .content-tabs {
  background: var(--bg-bg-color-nightmode) !important;
}

.posts-filter .countries-filter,
.posts-filter .btn-group .btn {
  border-radius: 0;
}

.no-data {
  border-radius: 0;
}

.ui-box {
  border-radius: 0;
}


.post-media,
.post-media-image .image,
.post-media-image>div,
.post-footer,
.post-media-image .source,
.post-product-wrapper,
.post-funding-meta .funding-description,
.post-job-meta .job-description {
  border-radius: 0;
}

.post-text {
  border-radius: 0;
}

.post-text.js_readmore {
  padding-top: 15px;
}

.mt10 .pg_wrapper.clearfix {
  border-radius: 0;
}


@media (min-width: 768px) {
  .post-media,
  .post-media-image .image,
  .post-media-image>div,
  .post-footer,
  .post-media-image .source,
  .post-product-wrapper,
  .post-funding-meta .funding-description,
  .post-job-meta .job-description {
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
  }

  .post-text {
    border-radius: 0;
    padding-left: 25px;
    padding-right: 25px;
  }

  .mt10 .pg_wrapper.clearfix {
    border-radius: 0;
    padding-left: 25px;
    padding-right: 25px;
  }
}


.article-wrapper,
.article-category {
  border-radius: 0;
}


/* ================== */


/* PROFILE */
/* ------------------------------- */

.profile-cover-wrapper {
  border-radius: 0;
}

.profile-tabs-wrapper {
  border-radius: 0;
}

/* ================== */


/* PUBLISHER */
/* ------------------------------- */

.publisher-tools-tab,
.publisher-footer-option {
  border-radius: 0;
}

.publisher-footer .publisher-footer-buttons {
  padding-right: 5px;
}



@media (max-width: 768px) {
  .publisher-tools-tabs ul {
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between; 
    padding: 0;
    margin: 0;
    list-style-type: none;
    overflow-x: hidden; 
  }

  .publisher-tools-tabs ul li {
    flex: 1 0 auto; 
    text-align: center; 
    margin: 0px ; 
  }

  .publisher-tools-tabs {
    margin: 0px ;
  }

  .publisher-footer-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 5px; 
    width: 100%;
  }

  .publisher-footer-buttons .btn-group,
  .publisher-footer-buttons .d-grid {
    flex: 1; 
    margin-bottom: 10px; 
    margin-left: 5px;
    margin-right: 5px;
  }

  .publisher-footer-buttons .btn {
    width: auto; 
  }

  .btn-group .dropdown-menu {
    left: 0; 
    right: auto;
  }
  .x-form.publisher .publisher-message {
    padding:15px 15px 0px 65px;
  }
  
}



/* ================== */


/* PROFILE */
/* ------------------------------- */

.new-profile-wrapper {
  margin-bottom: 20px;
}

.new-profile-wrapper .profile-header {
  border-radius: 0;
  margin-right: 0px;
  margin-left: 0px;
  margin-top: 12px;
}

.new-profile-wrapper .profile-avatar-wrapper,
.new-profile-wrapper .profile-name-wrapper,
.new-profile-wrapper .profile-buttons-wrapper {
  position: static;
}

.new-profile-wrapper .profile-avatar-wrapper {
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.new-profile-wrapper .profile-avatar-wrapper img {
  border-radius: 12px !important;
  width: 100%;
  height: 100%;
}

.profile-avatar-wrapper {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

.profile-avatar-wrapper img {
  border-radius: 12px !important;
}

.profile-header.mb20 {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Profile sidebar cards - Target specific cards by their unique child elements */
.theiaStickySidebar .card:has(.progress.mt5),
.theiaStickySidebar .card:has(.about-list),
.theiaStickySidebar .card:has(.side-panel-photos-grid),
.theiaStickySidebar .card:has(.circled-user-box) {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .theiaStickySidebar .card:has(.progress.mt5),
body.night-mode .theiaStickySidebar .card:has(.about-list),
body.night-mode .theiaStickySidebar .card:has(.side-panel-photos-grid),
body.night-mode .theiaStickySidebar .card:has(.circled-user-box) {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile buttons */
.profile-buttons-wrapper .btn.btn-sm.btn-secondary {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .profile-buttons-wrapper .btn.btn-sm.btn-secondary {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile action buttons (Connect, Follow, Chat, More) */
.profile-buttons-wrapper .btn.btn-md,
.profile-buttons-wrapper .btn.btn-icon {
  border-radius: 12px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .profile-buttons-wrapper .btn.btn-md,
body.night-mode .profile-buttons-wrapper .btn.btn-icon {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Social media icon buttons */
.theiaStickySidebar .btn.btn-social-icon {
  border-radius: 7px !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .theiaStickySidebar .btn.btn-social-icon {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Profile cover and tabs border-radius based on banner presence */
/* When banner exists: cover gets top rounded corners, tabs get bottom rounded corners */
.profile-cover-wrapper {
  border-radius: 12px 12px 0px 0px !important;
  overflow: hidden;
}

.profile-cover-wrapper ~ .profile-tabs-wrapper.d-flex.justify-content-evenly {
  border-radius: 0px 0px 12px 12px !important;
}

/* When no banner: tabs get all rounded corners */
.profile-tabs-wrapper.d-flex.justify-content-evenly {
  border-radius: 12px !important;
}

/* Photos page card */
.card.panel-photos {
  border-radius: 12px !important;
  overflow: hidden;
}

.new-profile-wrapper .profile-avatar-change,
.new-profile-wrapper .profile-avatar-crop,
.new-profile-wrapper .profile-avatar-delete {
  right: 10px;
}

.new-profile-wrapper .profile-name-wrapper {
  text-shadow: none;
  background: transparent;
}

.new-profile-wrapper .profile-name-wrapper a {
  color: #000;
}

.new-profile-wrapper .profile-buttons-wrapper {
  background: transparent;
}

/* ================== */


/* ADMIN PANEL */
/* ------------------------------- */

.stat-panel {
  border-radius: 0;
}

/* ================== */




.page-header {
	display: none;
}

.js_search-form {
	margin-top: 20px;
}

.bg-red {
	background-color: var(--body-bg-color) !important;
  color: var(--body-text-color) !important;
}



.main-header .search-wrapper .form-control {
	background-color: #f2f2f2 !important;
}

/*.pg_wrapper a {
    background-position: center center !important;
    background-size: 50% 50% !important; 
}

.pg_wrapper a img {
    width: 50% !important;
    height: 50% !important;
}*/


.mlr5 {
    margin-top: 5px !important;
}

.d-inline-block {
    margin-top: 5px !important;
}



.ui-box {
    text-align: left; 
    padding-top: 10px; 
	margin-top: 0; 
	/*border: 1px solid #666;*/

}

.ui-box .user-info {
    display: flex;
    align-items: center;
    flex-direction: row;
}

.ui-box .img {
    /*border-radius: 50%;*/
    padding: 4px;
    position: relative;
    top: 0; 
    left: 0; 
    transform: none; 
    margin-right: 5px; 
}

.ui-box .user-details {
    flex: 1;
    /*display: flex;*/
    align-items: center;
    justify-content: flex-start;
}

.ui-box img {
    border-radius: 0; 
    height: 92px;
    width: 92px;
}

.col-md-4 {
    padding-top: 0;
    padding-bottom: 0;
}

.publisher-avatar {
	border-radius: 7px !important;
}


@media (max-width: 480px) {
    .reactions-container {
        margin-top: 85px !important;
    }
}


.main-side-nav-card {
    height: 85vh !important;
    overflow-x: hidden !important; 
    overflow-y: auto !important;   
    padding-right: 2px !important; 
    box-sizing: content-box !important;
}

.main-side-nav-card::-webkit-scrollbar {
    width: 2px !important;  
    height: 2px !important;  
}

.main-side-nav-card::-webkit-scrollbar-thumb {
    border-radius: 1px !important;
    background: transparent !important; 
}

.main-side-nav-card:hover::-webkit-scrollbar-thumb {
    background: #333 !important; 
}

.main-side-nav-card {
    scrollbar-width: thin !important;
    scrollbar-color: transparent transparent !important; 
}

.main-side-nav-card:hover {
    scrollbar-color: #333 transparent !important; 
}


.dropdown-menu.gif-search.custom-scrollbar {
    overflow: auto !important;
    max-height: 31vh !important;
}


.offline-img {
    filter: grayscale(100%); 
}

/* .online-img {
    
} */



@media (min-width: 768px) {
    .main-side-nav .static, .main-side-nav a {
        margin-bottom: 0px !important;
    }
}





/*.chat-sidebar {
    background: #000;
    color: #666;
    bottom: 0;
    padding: 10px;
    top: 70px;
    right: 0;
    width: 75px;
    transition: 0.5s; 
    transform: translateX(50%);
    overflow-x: hidden; 
	poisition:absolute !important;
}


.chat-sidebar:hover {
    transform: translateX(0); 
}

body {
    overflow-x: hidden;
} */


/*

.btn-chat + .dropdown-menu {
    position: fixed !important;
    z-index: 1050 !important;
    right: 75px !important; 
}

.chat-sidebar {
  z-index: 9999 !important;
}
*/


/*
.user-info {
    display: flex !important;
    align-items: center !important; 
}

.user-details {
    display: flex !important;
    flex-direction: column !important; 
    justify-content: center !important;
}

.js_user-popover, .verified-badge {
    display: inline-block;
    margin-right: 5px; 
}
*/



.h9 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-size: 14px;
    line-height: 1.2;
    color: var(--bs-heading-color);
    font-weight: bold;
}

.btn-group-sm > .btn, .btn-sm {
    font-size: 11px !important;
    padding: 8px 8px !important;
}



.profilebutton {
	padding-left: 10px!important ;
	padding-right: 10px!important;
}

.profilebutton2 {
	height: 44px !important;
	margin-top: 0px !important;
}



@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    /* width: 100%; */
    /*margin-top: 30px;*/
  }
}


.card-body.with-form,
.card-body.with-list,
.card-body.with-nav {
  padding: 0 !important;
}




@media screen and (min-width: 768px) {
  .col-lg-1 {
    width: 75px !important;
  }

  .col-md-2 {
    width: 75px !important;
  }
}


@media screen and (min-width: 768px) {
  .main-side-nav .user-image img {
    /* 
    width: 100%;
    */
    /* 

    margin-top: 30px;
    */
  }

  .card-body.with-form,
  .card-body.with-list,
  .card-body.with-nav {
    padding: 0 !important;
  }
}


@media screen and (min-width: 768px) {

  .main-side-nav .static,
  .main-side-nav a {
    padding: 15px 10px;
  }
}



/* 
=======
Scenes 
=======
*/


/* Main Scenes Buttons */
#group_15 .checkbox-buttons label {
  font-size: 18px;
}


/* Form Labels */
#group_15 .form-label {
  font-size:0px;
}
#group_83 .form-label, #group_90 .form-label, #group_92 .form-label, 
#group_94 .form-label, #group_96 .form-label, #group_97 .form-label, 
#group_98 .form-label, #group_99 .form-label, #group_104 .form-label, 
#group_112 .form-label, #group_115 .form-label, #group_116 .form-label, 
#group_117 .form-label, #group_119 .form-label, #group_120 .form-label, 
#group_121 .form-label, #group_125 .form-label, #group_126 .form-label, 
#group_127 .form-label, #group_131 .form-label, #group_134 .form-label, 
#group_135 .form-label, #group_100 .form-label, #group_101 .form-label, 
#group_102 .form-label, #group_103 .form-label, #group_105 .form-label, 
#group_106 .form-label, #group_107 .form-label, #group_108 .form-label, 
#group_109 .form-label, #group_110 .form-label, #group_111 .form-label, 
#group_113 .form-label, #group_114 .form-label, #group_118 .form-label, 
#group_122 .form-label, #group_123 .form-label, #group_124 .form-label, 
#group_128 .form-label, #group_129 .form-label, #group_130 .form-label, 
#group_132 .form-label, #group_133 .form-label, #group_136 .form-label, 
#group_137 .form-label, #group_138 .form-label, #group_84 .form-label, 
#group_85 .form-label, #group_86 .form-label, #group_87 .form-label, 
#group_88 .form-label, #group_89 .form-label, #group_91 .form-label, 
#group_95 .form-label{
  font-size: 10px;
}



/* Main Scenes Container */
#group_15 {
  padding-bottom: 10px;
}


/* Master Group CSS */
#group_83, #group_84, #group_85, #group_86, #group_87, #group_88, #group_89, 
#group_90, #group_91, #group_92, #group_94, #group_95, #group_96, #group_97, 
#group_98, #group_99, #group_100, #group_101, #group_102, #group_103, #group_104, 
#group_105, #group_106, #group_107, #group_108, #group_109, #group_110, #group_111, 
#group_112, #group_113, #group_114, #group_115, #group_116, #group_117, #group_118, 
#group_119, #group_120, #group_121, #group_122, #group_123, #group_124, #group_125, 
#group_126, #group_127, #group_128, #group_129, #group_130, #group_131, #group_132, 
#group_133, #group_134, #group_135, #group_136, #group_137, #group_138 
{
  visibility: hidden;
  position: absolute;
}

/* #group_83, #group_90, #group_92, #group_94, #group_96, #group_97, #group_98, 
#group_99, #group_104, #group_112, #group_115, #group_116, #group_117, #group_119, 
#group_120, #group_121, #group_125, #group_126, #group_127, #group_131, #group_133, 
#group_134, #group_135

 {
  padding-left: 20px;
  border-left:20px solid var(--body-bg-color)
} */


/* Top Scenes */
/* #group_83, #group_90, #group_92, #group_94, #group_96, #group_97, #group_98, 
#group_99, #group_104, #group_112, #group_115, #group_116, #group_117, #group_119, 
#group_120, #group_121, #group_125, #group_126, #group_127, #group_131, #group_133, 
#group_134, #group_135
 {
  border-top: 5px solid var(--body-bg-color);
  padding-top: 20px;
} */



.checkbox-buttons {
  display: flex;
  flex-direction: row;
  gap: 4px;
  flex-wrap: wrap;
  transition: flex 0.5s ease;
}

.btn-checkbox {
  display: none;
}

.btn-checkbox + label {
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 20px;
  width: fit-content;
  margin: 2px;
  background-color: transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: relative;
  color: #333;
  font-weight: normal;
  font-size: 14px !important;
}

.btn-checkbox:checked + label {
  background-color: var(--cs-mint);
  color: black;
  font-weight: normal;
  border: none;
  box-shadow: none;
  animation: pulse 1s ease-in-out 1;
}

.btn-checkbox:checked + label::after {
  display: none;
}

.btn-checkbox + label:hover {
  background-color: rgba(25, 184, 149, 0.1);
  border-color: rgba(25, 184, 149, 0.3);
  transform: translateY(-1px);
  color: black;
}

/* Override All Checkbox Types */
.btn-checkbox:checked + label,
.checkbox-item .btn-checkbox:checked + label,
.nested-checkbox-group .btn-checkbox:checked + label {
  color: black !important;
  background-color: var(--cs-mint) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Pulse animation */
@keyframes pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

/* Night Mode Styles */
body.night-mode .checkbox-buttons {

}

body.night-mode .btn-checkbox + label {
  color: var(--body-text-color-nightmode); 
  transition: all 0.3s ease;
}

body.night-mode .btn-checkbox:checked + label {
  background-color: var(--cs-mint);
  color: black;
  border: none;
  box-shadow: none;
}

body.night-mode .btn-checkbox + label:hover {
  background-color: rgba(25, 184, 149, 0.1);
  border-color: rgba(25, 184, 149, 0.3);
  transform: translateY(-1px);
  color: var(--cs-mint);
}


#youbtn {
  width: 96px;
}

.frbtn {
  font-size: 12px;
}




.ui-box {
  text-align: left !important;
  /*padding: 0px 10px 10px 0px !important;*/
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  margin-right: 10px !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  min-width: 220px !important;
  overflow: hidden;
  /*box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) !important;*/
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
}

.ui-box:hover {
  transform: scale(1.05) !important;
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.2) !important;
  z-index: 5000 !important;
}

.ui-box .user-info {
  display: flex !important;
  align-items: flex-start !important;
  flex-direction: row !important;
  margin-bottom: 10px !important;
}

.ui-box .img {
  padding: 0 !important;
  margin-right: 10px !important;
}

.ui-box .user-details {
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.ui-box img {
  height: 85px !important;
  width: 85px !important;
}

.ui-box .user-username {
  font-size: 14px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.ui-box .user-username a {
  color: #000 !important;
  text-decoration: none !important;
}

.ui-box .user-username a:hover {
  text-decoration: underline !important;
}

.ui-box .user-details .mt5 {
  margin-top: 5px !important;
}

.ui-box .user-actions {
  display: flex !important;
  justify-content: space-between !important;
  margin-top: auto !important;
  padding-top: 10px !important;
  width: 100%;
}

.ui-box .user-actions .btn {
  font-size: 12px !important;
  padding: 5px 10px !important;
  border-radius: 5px !important;
  margin: 0 !important;
  background-color: transparent !important; 
  border: none !important; 
  color: inherit !important; 
}

body.night-mode .user-username a {
  color: #FFF !important;
}



.col-md-4 {
  padding: 0 !important; 
}


.tooltip {
  z-index: 9999 !important;
}



.form-group.text-center {
  text-align: center;
}

.form-check.d-inline-block {
  display: inline-block;
}


.custom-checkbox .form-check-input {
  width: 20px; 
  height: 20px; 
  appearance: none;
  border: 2px solid #ddd;
  border-radius: 4px;
  position: relative; 
  outline: none; 
  cursor: pointer; 
}

.custom-checkbox .form-check-input:checked {
  background-color: var(--cs-mint); 
}

.custom-checkbox .form-check-input:checked::before {
  content: ""; 
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%; 
  height: 70%; 
}




.trim-scrolling {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  z-index: 1; 
  display: block; 
}


.trim-scrolling:hover {
  animation: scroll-text 5s linear infinite;
}

@keyframes scroll-text {
  from {
      transform: translateX(0);
  }
  to {
      transform: translateX(-50%);
  }
}


.ui-box .img {
  z-index: 2 !important;
}




body.visitor.n_chat {
  padding-top: 0px !important;
}


.csbeta-hidden {
  display: none !important;
}



#csbeta-back-button, #csbeta-next-button {
  box-shadow: none!important;
  font-size: 13px;
  font-weight: 600;
  padding: 1rem 2.5rem;
  white-space: nowrap;
  width: 100%;

  --bs-btn-padding-y: 0.5rem;
  --bs-btn-padding-x: 1rem;
  --bs-btn-font-size: 1.25rem;
  --bs-btn-border-radius: var(--bs-border-radius-lg);
  border-radius: var(--bs-border-radius-pill)!important;

  background-color: transparent;
  background-image: none;
  border-color: #2dce89;
  color: #2dce89;
  --bs-btn-color: #198754;
  --bs-btn-border-color: #198754;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #198754;
  --bs-btn-hover-border-color: #198754;
  --bs-btn-focus-shadow-rgb: 25,135,84;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #198754;
  --bs-btn-active-border-color: #198754;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #198754;
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: #198754;
  --bs-gradient: none;
}



.landing-left:before {
  opacity: 1 !important;
}

.content-tabs {
  /* margin-left: -11px; */
  justify-items: center;
}

.landing-form .card .js_panel .card-body .mt20 {
  color: #FFF !important;
}

.csbeta-form-section .js_hidden-section .form-check .form-check-label {
  color: #FFF !important;
}


#csbeta-section-2 .form-label {
  visibility: hidden !important;
}

#csbeta-section-2 .form-text {
  visibility: hidden !important;
}

.signupscenes_header {
  text-align: center;
  font-weight: bold;
  font-size: 20px;
  margin-bottom: -5px;
  color: #666;
}

.signupscenes_text {
  color: #666;
	margin-top: -30px;
}

.badge.badge-lg.bg-info.ml5 {
  background-color: var(--cs-mint) !important;
  color: #FFFFFF !important;
}

.btn.btn-sm.btn-info.js_unfollow {
  background-color: var(--cs-mint);
  border: 0px;
}

.main-left-panel {
  min-height: 100vh !important;
}

.h-100 {
  height: 95% !important;
}


.badge.bg-info.ml5{
  background-color: var(--cs-mint) !important;
  color: #FFFFFF !important;
}

.cc-compliance .cc-btn.cc-dismiss {
  background-color: var(--link-color) !important;
}

.text-primary {
  color: var(--link-color) !important;
}

.nav.nav-pills.nav-fill.nav-started.mb30.js_wizard-steps .nav-item .nav-link.active {
  background-color: var(--link-color) !important;
}


.card-body.with-nav .theiaStickySidebar .card {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .card-body.with-nav .theiaStickySidebar .card {
  background-color: var(--header-bg-color-nightmode) !important;
}

.container-fluid.sg-offcanvas {
  background: var(--body-bg-color);
}

body.night-mode .container-fluid.sg-offcanvas {
  background: var(--body-bg-nightmode);
}

.row.h-100 {
  background-color: var(--body-bg-color);
}

body.night-mode .row.h-100 {
  background-color: var(--body-bg-nightmode);
}


.alert.alert-success.text-with-list {
  color: var(--body-text-color);
  background-color: var(--body-bg-color);
}

body.night-mode .alert.alert-success.text-with-list {
  color: var(--body-text-color-nightmode);
  background-color: var(--body-bg-nightmode);
}

.user-image-top {
  height: 70px !important;
  margin-left: 47px;
}

.user-image-top img {
  height: 70px !important;
}

/* Target images with specific inline styles (user profile images) - make smaller and add border radius */
img[style*="max-width: 283px"],
img[style*="width: 283px"],
img[style*="max-width: 283px"][style*="max-height: 283px"] {
  border-radius: 12px !important;
  max-width: 200px !important;
  max-height: 200px !important;
  width: 200px !important;
  height: 200px !important;
  object-fit: cover !important;
}

/* User image in sidebar */
.main-side-nav .user-image-top {
  height: auto !important;
  margin-left: 0;
  text-align: center;
  padding: 10px 0;
}

.main-side-nav .user-image-top img {
  height: auto !important;
  width: 50%;
  margin: 0 auto;
}

@media screen and (max-width: 768px) {
  .main-side-nav .user-image-top img {
    border-radius: 12px !important;
  }
}

@media screen and (min-width: 768px) {
  .main-side-nav .user-image-top img {
    width: 100%;
    border-radius: 12px !important;
  }
}

/* Keep user image fixed size in expanded desktop sidebar */
.desktop-sidebar .main-side-nav .user-image-top img {
  width: 52px !important;
  max-width: 52px !important;
  height: 52px !important;
  object-fit: cover;
  border-radius: 12px !important;
}

#menu_icon {
  padding-left: 18px;
  padding-top: 22px;
}

.cs-doodle {
  display: none;
}

@media (min-width: 990px) {
  .cs-doodle {
    display: block;
    font-size: 45px;
    font-family: var(--body-font-family);
  }
}

h6.mb0 {
  font-size: 25px;
}


.col-lg-3.js_sticky-sidebar.main-right-panel.pt0 {
  padding-left: 12px !important;
  padding-right: 12px !important;
}

/*.col-lg-9.main-center-panel {
  padding-right: 75px !important;
}*/

/*.col-lg-4.js_sticky-sidebar.main-right-panel {
  padding-left: 25px !important;
}*/

.col-md-4.col-lg-3.sg-offcanvas-sidebar.admin-sidebar {
  width: 18% !important;
}






/* Styles for Grid Mode */
.grid-view .grid {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px; 
  margin-right: -10px; 
}

.grid-view .grid-item {
  width: calc(33.333% - 20px); 
  margin: 10px;
  background: var(--body-bg-color);
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  border-radius: 12px !important;
  overflow: visible !important;
  padding: 8px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  transform: translateZ(0); /* Force hardware acceleration */
  will-change: transform;
}

/* Remove padding on grid-item for image posts so images fill container */
.grid-view .grid-item:has(.pg_wrapper),
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)),
.grid-view .grid-item:has(.post-product-wrapper),
.grid-view .grid-item:has(.youtube-player),
.grid-view .grid-item:has(.js_videojs) {
  padding: 0 !important;
}

.grid-view .post-body {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.grid-view .grid-item.new {
  opacity: 0 !important;
  z-index: -1;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  transition: opacity 0.4s ease-out !important;
}

body.night-mode .grid-view .grid-item {
  background: var(--body-bg-nightmode);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .grid-view .grid-item.new {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Grid Mode: Hide text labels for action buttons */
.grid-view .reaction-btn-name,
.grid-view .action-btn span {
  display: none !important;
}

/* Grid Mode: Adjust action button spacing - left aligned */
.grid-view .post-actions {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  width: auto;
}

.grid-view .action-btn {
  flex: none;
  text-align: center;
  padding: 0;
  min-width: 44px;
  max-width: 44px;
}

/* Grid Mode: Override existing min-width rules */
.grid-view .action-btn.reactions-wrapper,
.grid-view .action-btn.js_comment,
.grid-view .action-btn.share-btn {
  min-width: 44px !important;
  flex: none !important;
}

/* Grid Mode: Style action icons */
.grid-view .action-icon {
  width: 20px !important;
  height: 20px !important;
}

.grid-view .reaction-btn-icon {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid Mode: Ensure comment button is visible */
.grid-view .js_comment {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.grid-view .js_comment .action-icon {
  display: block !important;
  visibility: visible !important;
}

/* Grid Mode: Override x-hidden class for comment button */
.grid-view .js_comment.x-hidden {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Grid Mode: Modern Overlay Design */
.grid-view .grid-item {
  position: relative;
  overflow: hidden;
}

/* Hide original post header in grid mode */
.grid-view .post-header {
  display: none !important;
}

/* Left Pill - User Info */
.grid-view .post-header-pill-left {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 12px !important;
  padding: 6px 10px;
  display: flex;
  align-items: center;
  z-index: 10;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  max-width: 60%;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.grid-view .post-header-pill-left .post-avatar {
  /* margin-right: 6px; */
  background: transparent !important;
}

/* Ensure all child elements are transparent except avatar picture */
.grid-view .post-header-pill-left *:not(.post-avatar-picture) {
  background: transparent !important;
}

.grid-view .post-header-pill-left .post-meta {
  background: transparent !important;
}

.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border-radius: 7px !important;
}

/* Additional specificity to override any conflicting rules */
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture,
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture:before,
.grid-view .post-header-pill-left .post-avatar a.post-avatar-picture:after {
  border-radius: 7px !important;
}

.grid-view .post-header-pill-left .post-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 0px 0px 0 0px !important;
}

.grid-view .post-header-pill-left .post-meta .post-author {
  font-weight: 600;
  font-size: 12px;
  color: #333;
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
  overflow: visible;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.grid-view .post-header-pill-left .post-meta .post-author a {
  color: #333;
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .post-author a:hover {
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .verified-badge {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  line-height: 1;
  flex-shrink: 0;
}

.grid-view .post-header-pill-left .post-meta .verified-badge .svg-container {
  width: 12px !important;
  height: 12px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.grid-view .post-header-pill-left .post-meta .verified-badge svg {
  width: 12px !important;
  height: 12px !important;
  fill: var(--primary-color);
  vertical-align: middle;
}

.grid-view .post-header-pill-left .post-meta .post-time {
  font-size: 10px;
  color: #666;
  margin: 0;
  line-height: 1;
}

.grid-view .post-header-pill-left .post-meta .post-time a {
  color: #666;
  text-decoration: none;
}

.grid-view .post-header-pill-left .post-meta .post-time a:hover {
  text-decoration: none;
}

/* Scene name in grid view pill */
.grid-view .post-header-pill-left .post-meta .post-scene {
  font-size: 10px;
  color: #666;
  margin-top: 2px;
  line-height: 1.2;
}

.grid-view .post-header-pill-left .post-meta .post-scene span {
  color: #666;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-scene {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-scene span {
  color: #ccc;
}

/* Right Pill - Menu Options */
.grid-view .post-header-pill-right {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 10;
  border-radius: 12px !important;
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-header-pill-right,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.grid-view .grid-item:has(.post-product-wrapper) .post-header-pill-right,
.grid-view .grid-item:has(.youtube-player) .post-header-pill-right,
.grid-view .grid-item:has(.js_videojs) .post-header-pill-right,
.grid-view .post:has(.pg_wrapper) .post-header-pill-right,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-header-pill-right,
.grid-view .post:has(.post-product-wrapper) .post-header-pill-right,
.grid-view .post:has(.youtube-player) .post-header-pill-right,
.grid-view .post:has(.js_videojs) .post-header-pill-right {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-header-pill-right,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-header-pill-right,
.grid-view .grid-item:has(.youtube-player):hover .post-header-pill-right,
.grid-view .grid-item:has(.js_videojs):hover .post-header-pill-right,
.grid-view .post:has(.pg_wrapper):hover .post-header-pill-right,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-header-pill-right,
.grid-view .post:has(.post-product-wrapper):hover .post-header-pill-right,
.grid-view .post:has(.youtube-player):hover .post-header-pill-right,
.grid-view .post:has(.js_videojs):hover .post-header-pill-right,
.grid-view .post-header-pill-right .dropdown.open,
.grid-view .post-header-pill-right:hover {
  opacity: 1;
  visibility: visible;
}

.grid-view .post-header-pill-right .dropdown {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
}

/* Ensure all child elements are transparent */
.grid-view .post-header-pill-right .dropdown * {
  background: transparent !important;
}

/* Hide expand icon in grid view - it's now in the dropdown menu */
.grid-view .post-header-pill-right .expand-post-icon {
  display: none !important;
}

.grid-view .post-header-pill-right .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

.grid-view .post-header-pill-right .fa-chevron-down::after {
  display: none !important;
}

/* YouTube controls pill styling */
.grid-view .youtube-controls-pill {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
  border: none !important;
  margin-right: 8px;
  z-index: 10;
  position: relative;
  vertical-align: middle;
  transition: all 0.3s ease;
}

/* When moved below the header pill on small screens */
.grid-view .youtube-controls-pill.youtube-controls-below {
  position: absolute !important;
  top: 36px !important;
  right: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
}

body.night-mode .grid-view .youtube-controls-pill {
  background: rgba(30, 30, 30, 0.7) !important;
  border: none !important;
}

.grid-view .youtube-controls-pill * {
  background: transparent !important;
}

.grid-view .youtube-controls-pill .youtube-caption-toggle,
.grid-view .youtube-controls-pill .youtube-resize-toggle,
.grid-view .youtube-controls-pill .video-caption-toggle,
.grid-view .youtube-controls-pill .video-resize-toggle,
.grid-view .youtube-controls-pill .image-caption-toggle,
.grid-view .youtube-controls-pill .image-resize-toggle {
  color: #666;
  font-size: 14px;
  cursor: pointer;
  margin-right: 8px;
  transition: color 0.2s ease;
}

.grid-view .youtube-controls-pill .youtube-resize-toggle,
.grid-view .youtube-controls-pill .video-resize-toggle,
.grid-view .youtube-controls-pill .image-resize-toggle {
  margin-right: 0;
}

.grid-view .youtube-controls-pill .youtube-caption-toggle:hover,
.grid-view .youtube-controls-pill .youtube-resize-toggle:hover,
.grid-view .youtube-controls-pill .video-caption-toggle:hover,
.grid-view .youtube-controls-pill .video-resize-toggle:hover,
.grid-view .youtube-controls-pill .image-caption-toggle:hover,
.grid-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

.grid-view .youtube-controls-pill .youtube-caption-toggle.active,
.grid-view .youtube-controls-pill .youtube-resize-toggle.active,
.grid-view .youtube-controls-pill .video-caption-toggle.active,
.grid-view .youtube-controls-pill .video-resize-toggle.active,
.grid-view .youtube-controls-pill .image-caption-toggle.active,
.grid-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle {
  color: #ccc;
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle:hover,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle:hover {
  color: var(--primary-color);
}

body.night-mode .grid-view .youtube-controls-pill .youtube-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .youtube-resize-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .video-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .video-resize-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .image-caption-toggle.active,
body.night-mode .grid-view .youtube-controls-pill .image-resize-toggle.active {
  color: var(--primary-color);
}

.grid-view .post-header .dropdown {
  margin-left: auto;
}

.grid-view .post-header .expand-post-icon {
  color: #666;
  font-size: 16px;
  margin-right: 8px;
}

.grid-view .post-header .fa-chevron-down {
  color: #666;
  font-size: 14px;
}

/* Bottom Action Circles - Left Aligned */
.grid-view .post-actions {
  position: absolute;
  bottom: 12px;
  left: 12px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8px;
  z-index: 10;
  border-top: none !important;
  border-bottom: none !important;
}

/* Hide by default on image posts only, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .post-actions,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-actions,
.grid-view .grid-item:has(.post-product-wrapper) .post-actions,
.grid-view .grid-item:has(.youtube-player) .post-actions,
.grid-view .grid-item:has(.js_videojs) .post-actions,
.grid-view .post:has(.pg_wrapper) .post-actions,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-actions,
.grid-view .post:has(.post-product-wrapper) .post-actions,
.grid-view .post:has(.youtube-player) .post-actions,
.grid-view .post:has(.js_videojs) .post-actions {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .post-actions,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.grid-view .grid-item:has(.post-product-wrapper):hover .post-actions,
.grid-view .grid-item:has(.youtube-player):hover .post-actions,
.grid-view .grid-item:has(.js_videojs):hover .post-actions,
.grid-view .post:has(.pg_wrapper):hover .post-actions,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .post-actions,
.grid-view .post:has(.post-product-wrapper):hover .post-actions,
.grid-view .post:has(.youtube-player):hover .post-actions,
.grid-view .post:has(.js_videojs):hover .post-actions,
.grid-view .grid-item:has(.reactions-wrapper.active) .post-actions,
.grid-view .post:has(.reactions-wrapper.active) .post-actions {
  opacity: 1;
  visibility: visible;
}

/* Hide YouTube controls pill by default on media posts, show on hover */
.grid-view .grid-item:has(.pg_wrapper) .youtube-controls-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.grid-view .grid-item:has(.post-product-wrapper) .youtube-controls-pill,
.grid-view .grid-item:has(.youtube-player) .youtube-controls-pill,
.grid-view .grid-item:has(.js_videojs) .youtube-controls-pill,
.grid-view .post:has(.pg_wrapper) .youtube-controls-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .youtube-controls-pill,
.grid-view .post:has(.post-product-wrapper) .youtube-controls-pill,
.grid-view .post:has(.youtube-player) .youtube-controls-pill,
.grid-view .post:has(.js_videojs) .youtube-controls-pill {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
}

.grid-view .grid-item:has(.pg_wrapper):hover .youtube-controls-pill,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.grid-view .grid-item:has(.post-product-wrapper):hover .youtube-controls-pill,
.grid-view .grid-item:has(.youtube-player):hover .youtube-controls-pill,
.grid-view .grid-item:has(.js_videojs):hover .youtube-controls-pill,
.grid-view .post:has(.pg_wrapper):hover .youtube-controls-pill,
.grid-view .post:has(.post-media-image):not(:has(.post-media)):hover .youtube-controls-pill,
.grid-view .post:has(.post-product-wrapper):hover .youtube-controls-pill,
.grid-view .post:has(.youtube-player):hover .youtube-controls-pill,
.grid-view .post:has(.js_videojs):hover .youtube-controls-pill {
  opacity: 1;
  visibility: visible;
}

/* Hide post-stats in grid mode (numbers appear on buttons) */
.grid-view .post-stats {
  visibility: hidden !important;
}

/* Remove post-stats height for image posts only in grid mode to prevent layout shift */
.grid-view .post:has(.pg_wrapper) .post-stats,
.grid-view .post:has(.post-media-image):not(:has(.post-media)) .post-stats,
.grid-view .post:has(.post-product-wrapper) .post-stats,
.grid-view .post:has(.youtube-player) .post-stats,
.grid-view .post:has(.js_videojs) .post-stats {
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  line-height: 0 !important;
}

.grid-view .action-btn {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease;
  position: relative;
  flex-shrink: 0;
}

/* Ensure all child elements are transparent except icons */
.grid-view .action-btn *:not(.action-icon):not(.reaction-btn-icon):not(.reactions-container):not(.reactions-container *):not(.reaction-count):not(.comment-count):not(.share-count) {
  background: transparent !important;
}

.grid-view .action-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2);
}

.grid-view .action-btn .action-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

.grid-view .action-btn .reaction-btn-icon {
  width: 20px;
  height: 20px;
  color: #333;
}

/* Reaction count badge */
.grid-view .action-btn .reaction-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Comment count badge */
.grid-view .action-btn .comment-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Share count badge */
.grid-view .action-btn .share-count {
  position: absolute;
  top: -4px;
  right: -4px;
  background: #03FFE1 !important;
  color: black !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  cursor: pointer;
  z-index: 1000 !important;
  pointer-events: auto !important;
}

/* Night mode - ensure count badges maintain same styling */
body.night-mode .grid-view .action-btn .reaction-count,
body.night-mode .grid-view .action-btn .comment-count,
body.night-mode .grid-view .action-btn .share-count {
  background: #03FFE1 !important;
  color: black !important;
}

/* Glassy styling for action dropdown menu in grid mode */
/* Hide original dropdown menu in grid mode when flyout is active */
.grid-view .action-dropdown-menu.grid-dropdown-hidden,
.grid-view .dropdown-menu.action-dropdown-menu.grid-dropdown-hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.grid-view .action-dropdown-menu,
.grid-view .dropdown-menu.action-dropdown-menu {
  background: rgba(255, 255, 255, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .grid-view .action-dropdown-menu,
body.night-mode .grid-view .dropdown-menu.action-dropdown-menu {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}


/* Hide text labels in action buttons */
.grid-view .action-btn span {
  display: none !important;
}

/* Night mode adjustments */
body.night-mode .grid-view .post-header-pill-left {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

body.night-mode .grid-view .post-header-pill-right .dropdown {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: none !important;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-author {
  color: #fff;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-author a {
  color: #fff;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-time {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-left .post-meta .post-time a {
  color: #ccc;
}

body.night-mode .grid-view .post-header-pill-right .expand-post-icon,
body.night-mode .grid-view .post-header-pill-right .fa-chevron-down {
  color: #ccc;
}

body.night-mode .grid-view .action-btn {
  background: rgba(30, 30, 30, 0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50% !important;
}

body.night-mode .grid-view .action-btn .action-icon,
body.night-mode .grid-view .action-btn .reaction-btn-icon {
  color: #fff;
}

/* Grid Mode: Smooth Post Expansion */
.grid-view .grid-item {
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Grid Mode: Expansion Container */
.grid-expansion-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80vw;
  max-width: 800px;
  height: 80vh;
  max-height: 600px;
  z-index: 1002;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.grid-expansion-container.active {
  opacity: 1;
  visibility: visible;
}

.grid-expansion-container .grid-item {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  box-shadow: 0 20px 10px rgba(0, 0, 0, 0.3);
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative;
}

/* Grid Mode: Expanded Post Badges */
.grid-expansion-container .verified-badge,
.grid-expansion-container .staff-badge {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

/* Grid Mode: Expanded Post Time Elements */
.grid-expansion-container .js_moment {
  display: inline-block !important;
}

/* Prevent external JavaScript from processing expanded content */
.grid-expansion-container * {
  pointer-events: auto !important;
}

/* Override any external moment.js processing for expanded content */
.grid-expansion-container .js_moment {
  /* Lock the moment element to prevent external processing */
  position: relative !important;
  z-index: 1 !important;
}

/* Expanded Post Overlay - Separate from modal-content-container */
.expanded-post-overlay {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto;
  align-items: center;
  justify-content: center;
}

/* Expanded Post Container - Based on modal-content-container but separate */
.expanded-post-container {
  position: relative; /* Needed for absolute positioning of close button */
  margin: 5% auto;
  padding: 0;
  width: 80%;
  max-width: 800px;
  background-color: var(--header-bg-color);
  max-height: 90%;
  border-radius: 6px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  overflow: visible; /* Changed to visible so close button can be outside */
}

/* Inner wrapper for scrollable content - full width */
.expanded-post-container .expanded-post-content {
  padding: 20px;
  max-height: 90vh;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

/* Remove Bootstrap column constraints from content inside */
.expanded-post-container .expanded-post-content .col-lg-8,
.expanded-post-container .expanded-post-content .col-lg-4 {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 100% !important;
}

/* Hide expand icon in expanded post view */
.expanded-post-container .expand-post-icon {
  display: none !important;
}

/* Hide grid-specific text pill in expanded post view to prevent duplicate text */
.expanded-post-container .post-text-pill,
.expanded-post-container .post-text-pill-content {
  display: none !important;
}

/* Hide "Read more" link in expanded post view since full content is already shown */
.expanded-post-container .post-media-expand-wrapper,
.expanded-post-container .post-media-expand-link {
  display: none !important;
}

/* Show OG meta content (title and description) by default in expanded post view */
.expanded-post-container .post-media-meta {
  display: block !important;
}

/* Fix post-media background color in expanded post view */
.expanded-post-container .post-media {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .post-media {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Fix post-media-meta background color in expanded post view */
.expanded-post-container .post-media-meta {
  background-color: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .post-media-meta {
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Remove box shadow from post in expanded post view */
.expanded-post-container .post {
  box-shadow: none !important;
}

/* Fix reactions-stats-item background color in expanded post view */
.expanded-post-container .reactions-stats > .reactions-stats-item {
  background: var(--header-bg-color) !important;
}

body.night-mode .expanded-post-container .reactions-stats > .reactions-stats-item {
  background: var(--header-bg-color-nightmode) !important;
}

body.night-mode .expanded-post-container {
  background-color: var(--header-bg-color-nightmode);
}

/* Expanded Post Close Button - positioned outside the modal */
.expanded-post-close {
  color: #ffffff;
  font-size: 32px;
  font-weight: 300;
  cursor: pointer;
  position: absolute;
  top: -20px;
  right: -20px;
  z-index: 10001;
  width: 40px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  pointer-events: auto;
  line-height: 1;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.expanded-post-close:hover,
.expanded-post-close:focus {
  background-color: rgba(0, 0, 0, 0.8);
  transform: scale(1.1);
  color: #ffffff;
  text-decoration: none;
}

body.night-mode .expanded-post-close {
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

body.night-mode .expanded-post-close:hover,
body.night-mode .expanded-post-close:focus {
  background-color: rgba(255, 255, 255, 0.3);
  color: #ffffff;
}

@media only screen and (max-width: 768px) {
  .expanded-post-close {
    visibility: hidden;
  }
}

/* Prevent body scrolling when expanded post is open */
body.expanded-post-open {
  overflow: hidden;
}

/* Grid Mode: Expansion Overlay */
.grid-expansion-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1001;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.grid-expansion-overlay.active {
  opacity: 1;
  visibility: visible;
}

/* Grid Mode: Close Button */
.grid-expansion-container .expand-close-btn,
.expanded-post-isolation .expand-close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.95);
  color: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 10001;
  font-size: 24px;
  font-weight: bold;
  transition: all 0.2s ease;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.grid-expansion-container .expand-close-btn:hover,
.expanded-post-isolation .expand-close-btn:hover {
  background: rgba(255, 255, 255, 1);
  transform: scale(1.1);
}

/* Prevent body scroll when post is expanded */
body.no-scroll {
  overflow: hidden;
}

/* Styles for List Mode */
.list-view .grid {
  display: block;
}

.list-view .grid-item {
  width: 100%;
  margin: 0 0 10px;
}

.list-view .post-body {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .list-view .post-body {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

/* Fix comment box height in list view - prevent infinite expansion */
.list-view .post-comments {
  max-height: 60vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

.grid-view .post-media,
.grid-view .post-media-image .image,
.grid-view .post-media-image>div,
.grid-view .post-footer,
.grid-view .post-media-image .source,
.grid-view .post-product-wrapper,
.grid-view .post-funding-meta .funding-description,
.grid-view .post-job-meta .job-description {
  border-radius: 12px;
  padding: 0 !important;
  margin: 0 !important;
}

/* Set min-height for OG images in grid posts */
.grid-view .post-media .post-media-image .image {
  min-height: 150px !important;
}

/* Article posts with cover images - make the inner div fill container in grid mode */
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image > div {
  width: 100% !important;
  height: 100% !important;
  padding-top: 0 !important; /* Override inline padding-top: 50% */
  aspect-ratio: 2 / 1 !important; /* Default 2:1 aspect ratio for articles */
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Fix source badge size on article posts - prevent it from inheriting width/height */
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image .source {
  width: 20px !important;
  height: 20px !important;
}

/* Set min-height for OG images in list mode (same as grid mode) */
.list-view .post-media .post-media-image .image {
  min-height: 150px !important;
}

/* Make images fill full width and height of container for image posts */
/* Include article posts with cover images */
.grid-view .grid-item:has(.pg_wrapper) .post-media-image .image,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image .image,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image .image,
.grid-view .grid-item:has(.pg_wrapper) .post-media-image>div,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image>div,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media-image>div,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .pg_wrapper,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .post-media,
.grid-view .grid-item:has(.post-product-wrapper) .post-product-wrapper,
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .grid-item:has(.js_videojs) .js_videojs {
  width: 100% !important;
  height: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .post-media-image img,
.grid-view .grid-item:has(.post-media-image):not(:has(.post-media)) .post-media-image img,
.grid-view .grid-item:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Style YouTube player wrapper to remove padding/margin in grid mode */
/* Also style article post wrapper to remove padding/margin */
.grid-view .grid-item:has(.youtube-player) .mt10.plr15,
.grid-view .grid-item:has(.youtube-player) > .post-body > .mt10.plr15,
.grid-view .post-body:has(.youtube-player) .mt10.plr15,
.grid-view .grid-item:has(.post-media):has(.post-media-image) .mt10.plr15,
.grid-view .grid-item:has(.post-media):has(.post-media-image) > .post-body > .mt10.plr15,
.grid-view .post-body:has(.post-media):has(.post-media-image) .mt10.plr15,
.grid-view .grid-item:has(.js_videojs) .overflow-hidden,
.grid-view .grid-item:has(.js_videojs) > .post-body > .overflow-hidden,
.grid-view .post-body:has(.js_videojs) .overflow-hidden {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Comment out margin-top on .mt10 in grid mode */
.grid-view .mt10 {
  /* margin-top: 10px; */
  margin-top: 0 !important;
}

/* Make YouTube player position relative for play button and fill container */
/* Aspect ratio will be set dynamically by JavaScript based on actual video dimensions */
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .post-body:has(.youtube-player) .youtube-player,
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .post-body:has(.js_videojs) .js_videojs {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9; /* Default fallback, will be overridden by JavaScript */
  display: block;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Ensure YouTube thumbnail image fills container */
.grid-view .grid-item:has(.youtube-player) .youtube-player img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure video player fills container and displays poster correctly */
.grid-view .grid-item:has(.js_videojs) .js_videojs video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Ensure YouTube play button is centered */
.grid-view .grid-item:has(.youtube-player) .youtube-player .play,
.grid-view .post-body:has(.youtube-player) .youtube-player .play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* Handle YouTube posts with text - style like image+text posts */
.grid-view .grid-item:has(.youtube-player):has(.post-text-pill) .youtube-player {
  height: auto !important;
  min-height: 200px;
}

/* Handle video posts with text - style like image+text posts */
.grid-view .grid-item:has(.js_videojs):has(.post-text-pill) .js_videojs {
  height: auto !important;
  min-height: 200px;
}

/* Remove any black borders from video containers */
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .grid-item:has(.js_videojs) .overflow-hidden,
.grid-view .post:has(.js_videojs) .js_videojs,
.grid-view .post:has(.js_videojs) .overflow-hidden,
.list-view .post:has(.js_videojs) .js_videojs,
.list-view .post:has(.js_videojs) .overflow-hidden {
  border: none !important;
  border-bottom: none !important;
  border-top: none !important;
  border-left: none !important;
  border-right: none !important;
}

/* Fix black lines around corners for video elements with border-radius */
.grid-view .grid-item:has(.js_videojs) .js_videojs video.vjs-tech,
.grid-view .post:has(.js_videojs) .js_videojs video.vjs-tech,
.list-view .post:has(.js_videojs) .js_videojs video.vjs-tech,
.grid-view .grid-item:has(.js_videojs) video,
.grid-view .post:has(.js_videojs) video,
.list-view .post:has(.js_videojs) video,
.grid-view .grid-item:has(.js_videojs) .video-js video,
.grid-view .post:has(.js_videojs) .video-js video,
.list-view .post:has(.js_videojs) .video-js video {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Fix video-js wrapper to prevent black lines */
.grid-view .grid-item:has(.js_videojs) .video-js,
.grid-view .post:has(.js_videojs) .video-js,
.list-view .post:has(.js_videojs) .video-js {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
  background: transparent !important;
}

/* Fix black lines around corners for images with border-radius */
.grid-view .grid-item .post-media-image .image,
.grid-view .grid-item .post-media-image img,
.grid-view .grid-item .pg_wrapper img,
.list-view .post-media-image .image,
.list-view .post-media-image img,
.list-view .pg_wrapper img {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Ensure video containers have proper border-radius and overflow */
.grid-view .grid-item:has(.js_videojs) .js_videojs,
.grid-view .post:has(.js_videojs) .js_videojs,
.list-view .post:has(.js_videojs) .js_videojs {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Ensure image containers have proper border-radius and overflow */
.grid-view .grid-item .post-media-image,
.grid-view .grid-item .pg_wrapper,
.list-view .post-media-image,
.list-view .pg_wrapper {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Fix black lines for YouTube players */
.grid-view .grid-item:has(.youtube-player) .youtube-player,
.grid-view .post:has(.youtube-player) .youtube-player,
.list-view .post:has(.youtube-player) .youtube-player {
  border-radius: 12px !important;
  overflow: hidden !important;
  border: none !important;
  outline: none !important;
}

.grid-view .grid-item:has(.youtube-player) .youtube-player img,
.grid-view .post:has(.youtube-player) .youtube-player img,
.list-view .post:has(.youtube-player) .youtube-player img {
  border: none !important;
  outline: none !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* Fix black lines for post-media containers */
.grid-view .grid-item .post-media,
.list-view .post-media {
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Ensure video and image elements inside rounded containers respect border-radius */
.grid-view .grid-item:has(.js_videojs) video,
.grid-view .grid-item:has(.youtube-player) img,
.grid-view .grid-item .post-media-image img,
.grid-view .grid-item .pg_wrapper img,
.list-view .post:has(.js_videojs) video,
.list-view .post:has(.youtube-player) img,
.list-view .post-media-image img,
.list-view .pg_wrapper img {
  border-radius: 12px !important;
}

/* Hide text pill by default for landscape YouTube videos, video posts, and images */
.grid-view .grid-item.youtube-landscape .post-text-pill.landscape-hidden,
.grid-view .grid-item.video-landscape .post-text-pill.landscape-hidden,
.grid-view .grid-item.image-landscape .post-text-pill.landscape-hidden {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Show text pill when toggled for landscape media */
.grid-view .grid-item.youtube-landscape .post-text-pill.landscape-visible,
.grid-view .grid-item.video-landscape .post-text-pill.landscape-visible,
.grid-view .grid-item.image-landscape .post-text-pill.landscape-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Style for expanded YouTube player, video posts, and images (spanning all columns) */
.grid-view .grid-item.youtube-expanded,
.grid-view .grid-item.video-expanded,
.grid-view .grid-item.image-expanded {
  position: relative !important;
  z-index: 100 !important;
}

.grid-view .grid-item.youtube-expanded .youtube-player,
.grid-view .grid-item.video-expanded .js_videojs {
  aspect-ratio: 21 / 9; /* Wider aspect ratio for expanded view */
}

/* Active state for toggle buttons */
.grid-view .youtube-caption-toggle.active,
.grid-view .youtube-resize-toggle.active,
.grid-view .video-caption-toggle.active,
.grid-view .video-resize-toggle.active,
.grid-view .image-caption-toggle.active,
.grid-view .image-resize-toggle.active {
  color: var(--primary-color) !important;
  opacity: 1 !important;
}

/* Fix multiple images collage layout in grid view */
/* Ensure pg_wrapper maintains proper structure for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper {
  position: relative;
  overflow: hidden;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure clearfix works for multiple images */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* For 2 images - force float layout to display side by side */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_2x {
  float: left !important;
  width: 50% !important;
  padding-right: 1px;
  box-sizing: border-box;
  display: block !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_2x > a {
  padding-bottom: 100% !important;
}

/* For 3 images - force float layout for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x {
  width: 100% !important;
  display: block;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3 {
  float: left !important;
  width: 66.66% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3 {
  float: right !important;
  width: 33.34% !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in {
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

/* For 4+ images - force float layout for collage */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x {
  width: 100% !important;
  display: block;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3 {
  float: left !important;
  width: 66.66% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3 {
  float: right !important;
  width: 33.34% !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in {
  width: 100% !important;
  margin-right: 0 !important;
  padding-right: 0 !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Override JavaScript inline width styles but keep within bounds */
/* The JS calculates widths, but we need to ensure they fill containers without overflow */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3 {
  max-width: 33.34% !important;
  overflow: visible;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3 {
  max-width: 66.67% !important;
  overflow: visible;
}

/* Inner elements should fill their parent containers without exceeding */
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_1o3_in,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_3x .pg_2o3_in,
.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_2o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .grid-item:has(.pg_wrapper) .pg_wrapper .pg_4x .pg_1o3_in > a {
  padding-bottom: 100% !important;
  width: 100% !important;
}

.grid-view .post-text {
  border-radius: 12px;
  padding-left: 25px;
  padding-right: 25px;
}

.grid-view .mt10 .pg_wrapper.clearfix {
  border-radius: 12px;
  padding-left: 0px;
  padding-right: 0px;
}

.grid-view .plr15 {
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.grid-view .mt10 .pg_wrapper.clearfix .blur {
  filter: blur(5px) !important;
  width: 95% !important;
}

.grid-view .post-meta .float-end {
  padding-left: 5px;
}

.grid-view .grid-item img {
  width: 100%;
  height: auto;
  display: block;
}

/* Preserve mention avatar sizes in grid mode */
.grid-view .mention-avatar {
  width: 20px !important;
  height: 20px !important;
  display: inline-block !important;
}

.grid-view .album-photo img {
  width: 100%;
  height: auto;
  display: block;
}


.grid-view .post-meta {
  padding: 10px 10px 0 0px !important;
}

/* Grid Loading Animation */
.grid-loading-skeleton {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

.grid-loading-skeleton .skeleton-item {
  width: calc(33.333% - 20px);
  margin: 10px;
  background: var(--body-bg-color);
  border-radius: 12px;
  overflow: hidden;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

body.night-mode .grid-loading-skeleton .skeleton-item {
  background: var(--body-bg-nightmode);
}

.grid-loading-skeleton .skeleton-item .skeleton-content {
  padding: 20px;
}

.grid-loading-skeleton .skeleton-item .skeleton-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.grid-loading-skeleton .skeleton-item .skeleton-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  margin-right: 12px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-avatar {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

.grid-loading-skeleton .skeleton-item .skeleton-text {
  flex: 1;
}

.grid-loading-skeleton .skeleton-item .skeleton-line {
  height: 12px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 6px;
  margin-bottom: 8px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-line {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

.grid-loading-skeleton .skeleton-item .skeleton-line.short {
  width: 60%;
}

.grid-loading-skeleton .skeleton-item .skeleton-line.medium {
  width: 80%;
}

.grid-loading-skeleton .skeleton-item .skeleton-media {
  height: 200px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: 8px;
  margin-top: 15px;
}

body.night-mode .grid-loading-skeleton .skeleton-item .skeleton-media {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Show skeleton by default */
.js_posts_stream .grid-loading-skeleton {
  opacity: 1;
  transition: opacity 0.5s ease-out;
}

/* Grid view skeleton - multiple posts */
.js_posts_stream.grid-view .grid-loading-skeleton {
  display: flex;
  flex-wrap: wrap;
  margin-left: -10px;
  margin-right: -10px;
}

/* List view skeleton - single post */
.js_posts_stream.list-view .grid-loading-skeleton {
  display: block;
}

.js_posts_stream.list-view .grid-loading-skeleton .skeleton-item {
  width: 100%;
  margin: 0 0 20px 0;
}

/* Hide skeleton when posts are loaded */
.js_posts_stream.loaded .grid-loading-skeleton {
  opacity: 0;
  pointer-events: none;
}

/* Show posts when loaded */
.js_posts_stream.loaded ul {
  display: block;
  opacity: 1;
  transition: opacity 0.5s ease-in;
}

/* Hide posts when loading */
.js_posts_stream:not(.loaded) ul {
  display: block;
  opacity: 0;
}










.fas.fa-sliders-h {
  font-size: 16px;
}

/* Fix ad positioning in grid mode */
.grid-view .card-body {
  position: relative !important;
  z-index: auto !important;
}

.grid-view .adsbygoogle {
  position: relative !important;
  z-index: auto !important;
  display: block !important;
}

.grid-view .adsbygoogle iframe {
  position: relative !important;
  z-index: auto !important;
}

/* Ensure ads appear as grid items */
.grid-view .card {
  width: calc(33.333% - 20px);
  margin: 10px;
  background: var(--body-bg-color);
  border-radius: 12px !important;
  overflow: hidden !important;
  display: inline-block;
  vertical-align: top;
}

body.night-mode .grid-view .card {
  background: var(--body-bg-nightmode);
}

/* Ads wrapped in grid-item should fill the grid item */
.grid-view .grid-item .card {
  width: 100% !important;
  margin: 0 !important;
  display: block !important;
}

/* Make ads participate in grid layout */
.grid-view .container-fluid .card,
.grid-view .container .card {
  width: calc(33.333% - 20px) !important;
  margin: 10px !important;
  display: inline-block !important;
  vertical-align: top !important;
  float: none !important;
}

/* Ensure ads appear between posts in the flow */
.grid-view .js_posts_stream .card {
  width: calc(33.333% - 20px) !important;
  margin: 10px !important;
  display: inline-block !important;
  vertical-align: top !important;
}

/* Posts stream ads styling */
.posts-stream-ad {
  background: var(--body-bg-color);
  border-radius: 12px !important;
  overflow: hidden !important;
}

body.night-mode .posts-stream-ad {
  background: var(--body-bg-nightmode);
}

.ad-placeholder-posts {
  background: linear-gradient(135deg, #f5f5f5 0%, #e8e8e8 100%) !important;
  border: 2px dashed #ccc !important;
  border-radius: 8px !important;
  color: #666 !important;
  font-family: Arial, sans-serif !important;
}

body.night-mode .ad-placeholder-posts {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%) !important;
  border-color: #555 !important;
  color: #ccc !important;
}








/*.main-wrapper .container-fluid.mt20.sg-offcanvas {
  padding-right: 6% !important;
}

.main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--body-bg-color) !important;
  padding-right: 5%;  
}

@media (min-width: 1201px) {
  .main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar {
    padding-right: 55px;  
  }
}
*/


/*.main-wrapper .container-fluid.sg-offcanvas .row .col-md-10.col-lg-11.sg-offcanvas-mainbar .row.h-100 .col-lg-4.js_sticky-sidebar.main-right-panel{
  padding-right: 2%;
}*/


@media (min-width: 992px) {
  .col-lg-11 {
      width: 93%;
      padding-right: 80px;
  }

  .col-lg-9.main-center-panel {
    padding-right: 10px;
  }

  .main-wrapper .container-fluid.mt20.sg-offcanvas .row .col-md-8.col-lg-9.sg-offcanvas-mainbar {
    width: 69% !important;
    padding-right: 75px !important;
  }
  
  .col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar {
    padding-left: 33px;
    padding-right: 33px;
  }

  .js_posts_stream .post {
    padding-left: 33px;
    padding-right: 33px;
    box-shadow: none !important;
  }
  .js_posts_stream.grid-view .post {
    padding-left: 0px;
    padding-right: 0px;
    box-shadow: none !important;
  }
  .js_posts_stream.grid-view .post-body {
    margin-bottom: -20px;
  }
}




/* Styles for Desktop Menu Icon and Sidebar */
.csmenu {
  z-index: 1003; 
}

.desktop-sidebar {
  position: absolute; 
  left: -300px;
  width: 300px;
  height: calc(100% - 75px); 
  background: var(--header-bg-color);
  transition: left 0.3s ease-in-out; 
  z-index: 1002; 
}

.desktop-sidebar.active {
  left: 0;
  top: 0px; 
  z-index: 1004;
  height: 100vh;
}

body.night-mode .desktop-sidebar.active {
  background: var(--header-bg-color-nightmode);
}

.desktop-sidebar .sidebar-content .main-side-nav {
  padding-left: 0;
  width: auto !important;
}

.desktop-sidebar .sidebar-content .main-side-nav ul {
  margin-left: -11px !important;
}

.desktop-sidebar .sidebar-content .main-side-nav li {
  text-align: left;
  padding-left: 8px;
}

.desktop-sidebar .sidebar-content .main-side-nav li a {
  display: flex;
  align-items: center;
}

.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 1001;
}

.overlay.active {
  display: block;
}

body.noscroll {
  overflow: hidden;
}







/* logo initial load */ 
#logo {
  visibility: hidden;  
}


/* Hide logo on mobile devices */
@media (max-width: 768px) {
  #logo {
      display: none !important;
  }
}



@media (max-width: 768px) {
  .main-wrapper {
    width: 100% !important;
  }
}




/* Modal overlay */
.modal-overlay {
  display: none;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
  overflow: auto; 
}

/* Modal content container */
.modal-content-container {
  position: relative;
  margin: 5% auto;
  padding: 20px;
  width: 80%;
  max-width: 800px;
  background-color: var(--header-bg-color);
  overflow-y: auto;
  max-height: 90%; 
  border-radius:6px;
}

body.night-mode .modal-content-container {
  background-color: var(--header-bg-color-nightmode);
}

/* Publisher modal border radius - target modal-content when it contains publisher */
.modal-content:has(.publisher),
.modal-content:has(.x-form.publisher) {
  border-radius: 12px !important;
}

/* Fallback for browsers that don't support :has() */
.modal-content .publisher,
.modal-content .x-form.publisher {
  border-radius: 12px;
}

/* Close Button */
.modal-post-close {
  color: var(--body-text-color);
  font-size: 48px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: -26px;
  right: 0px;
  z-index: 50;
}

@media only screen and (max-width: 768px) {
  .modal-post-close {
    visibility: hidden;
  }
}

.modal-post-close:hover,
.modal-post-close:focus {
  color: var(--body-text-color);
  text-decoration: none;
}

body.night-mode .modal-post-close {
  color: var(--body-text-color-nightmode);
}

body.night-mode .modal-post-close:hover,
body.night-mode .modal-post-close:focus {
  color: var(--body-text-color-nightmode);
}



/* Prevent body scrolling when modal is active */
body.modal-open {
  overflow: hidden;
}

/* Hide expand icon when modal is open */
body.modal-open .expand-post-icon {
  display: none;
}








@media (max-width: 768px) {
  .navbar-wrapper {
    border-top: 1px solid var(--body-text-color);
  }
  body.night-mode .navbar-wrapper {
    border-top: 1px solid var(--body-text-color-nightmode);
  }
}


.container-fluid.mt20.sg-offcanvas {
  margin-top: 0px !important;
}


.stat-panel .stat-cell.narrow {
  color: var(--body-text-color);
}
.stat-panel .stat-cell.narrow a{
  color: var(--body-text-color);
}
body.night-mode .stat-panel .stat-cell.narrow {
  color: var(--body-text-color-nightmode);
}
body.night-mode .stat-panel .stat-cell.narrow a{
  color: var(--body-text-color-nightmode);
}



.col-md-4.col-lg-3.sg-offcanvas-sidebar {
  border-right: 1px solid var(--header-bg-color);
}

body.night-mode .col-md-4.col-lg-3.sg-offcanvas-sidebar {
  border-right: 1px solid var(--header-bg-color-nightmode);
}

/* Background color for main content area */
.col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--bg-bg-color) !important;
}

body.night-mode .col-md-10.col-lg-11.sg-offcanvas-mainbar {
  background-color: var(--bg-bg-color-nightmode) !important;
}

/* Alert post see-more background color */
.alert.alert-post.see-more {
  background-color: var(--bg-bg-color) !important;
}

body.night-mode .alert.alert-post.see-more {
  background-color: var(--bg-bg-color-nightmode) !important;
}




.theiaStickySidebar .search-wrapper #search-history {
  
  background-color: var(--body-bg-color);
}

body.night-mode .theiaStickySidebar .search-wrapper #search-history {
  
  background: var(--body-bg-nightmode);
}

.theiaStickySidebar .search-wrapper #search-input {
  background-color: var(--body-bg-color);
  border-radius: 0px !important;
  color: var(--body-text-color);
  border: 0px !important;
}

body.night-mode .theiaStickySidebar .search-wrapper #search-input {
  background-color: var(--body-bg-nightmode);
  color: var(--body-text-color-nightmode);
}

body.night-mode .theiaStickySidebar .search-wrapper #search-input::placeholder {
  background-color: var(--body-bg-nightmode);
  color: var(--body-text-color-nightmode);
}



body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-add {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-cancel {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode);
}

body.night-mode .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode);
}

/* Additional night mode styles for friend request buttons in dropdown menus */
body.night-mode .dropdown-widget .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode);
}

body.night-mode .dropdown-widget .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode);
}

/* General night mode styles for friend request buttons */
body.night-mode .btn.btn-sm.js_friend-accept {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .btn.btn-sm.js_friend-decline {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .theiaStickySidebar .card .card-body.with-list .feeds-item .data-container .data-content .float-end .btn.btn-sm.js_friend-add{
  color: var(--body-text-color-nightmode);
}





.posts-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 33px;
}

/* .btn-group.btn-group-sm {
  margin-left: 10px;
} */

.btn-toggle-view .svg-container {
  color: var(--side-menu-icon-inactive) !important;
}

.btn-toggle-view.active .svg-container {
  color: var(--side-menu-icon-active) !important;
}

body.night-mode .btn-toggle-view .svg-container {
  color: var(--side-menu-icon-inactive-nightmode) !important;
}

body.night-mode .btn-toggle-view.active .svg-container {
  color: var(--side-menu-icon-active-nightmode) !important;
}



.x-form.publisher {
  padding-left: 18px;
  padding-right: 18px;
  padding-top: 18px;
}

@media (max-width: 768px) {
  .x-form.publisher {
    padding-left: 0px;
  }
}

.dropdown-menu.dropdown-widget.dropdown-search.js_dropdown-keepopen {
  width: 0 !important;
}


/* Override Bootstrap CSS variables for theiaStickySidebar cards */
.theiaStickySidebar .card {
  --bs-card-bg: var(--body-bg-color) !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card {
  --bs-card-bg: var(--body-bg-color-nightmode) !important;
  background-color: var(--body-bg-color-nightmode) !important;
}

/* Override for side menu card to use header-bg-color instead of body-bg-color */
.theiaStickySidebar .card.main-side-nav-card,
.csmenu .main-side-nav-card {
  --bs-card-bg: var(--header-bg-color) !important;
  background-color: var(--header-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card.main-side-nav-card,
body.night-mode .csmenu .main-side-nav-card {
  --bs-card-bg: var(--header-bg-color-nightmode) !important;
  background-color: var(--header-bg-color-nightmode) !important;
}

/* Maximum specificity override for card-header to prevent Bootstrap from overriding */
.theiaStickySidebar .card .card-header,
.theiaStickySidebar .card[id] .card-header,
.col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar .card .card-header {
  --bs-card-bg: var(--body-bg-color) !important;
  background-color: var(--body-bg-color) !important;
  background: var(--body-bg-color) !important;
}

body.night-mode .theiaStickySidebar .card .card-header,
body.night-mode .theiaStickySidebar .card[id] .card-header,
body.night-mode .col-lg-4.js_sticky-sidebar.main-right-panel .theiaStickySidebar .card .card-header {
  --bs-card-bg: var(--body-bg-color-nightmode) !important;
  background-color: var(--body-bg-color-nightmode) !important;
  background: var(--body-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode) !important;
}

/* Card with d-grid card-body needs border-radius on parent card */
.card:has(.card-body.d-grid) {
  border-radius: 12px !important;
  overflow: hidden !important;
}

/* More specific targeting for blog sidebar cards */
#blogside .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
}

body.night-mode #blogside .card {
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3) !important;
}

#blogside .card .card-body.d-grid {
  border-radius: 12px !important;
}

/* Ensure parent card has border-radius and overflow for blog sidebar */
#blogside .card:has(.card-body.d-grid),
#blogside .card .card-body.d-grid {
  border-radius: 12px !important;
}

#blogside .card:has(.card-body.d-grid) {
  overflow: hidden !important;
}

/* Fallback for browsers that don't support :has() */
#blogside .card > .card-body.d-grid {
  border-radius: 12px !important;
}

/* Ensure the card-body.d-grid has a background so border-radius is visible */
#blogside .card .card-body.d-grid {
  background-color: var(--body-bg-color) !important;
  border-radius: 12px !important;
}

body.night-mode #blogside .card .card-body.d-grid {
  background-color: var(--body-bg-nightmode) !important;
}

/* Cards with bg-transparent headers in blog sidebar */
#blogside .card:has(.card-header.bg-transparent) {
  border-radius: 12px !important;
  overflow: hidden !important;
}

#blogside .card .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
  background-color: var(--body-bg-color) !important;
}

#blogside .card:has(.card-header.bg-transparent) .card-body {
  border-radius: 0 0 12px 12px !important;
  background-color: var(--body-bg-color) !important;
}

body.night-mode #blogside .card .card-header.bg-transparent {
  background-color: var(--body-bg-nightmode) !important;
}

body.night-mode #blogside .card:has(.card-header.bg-transparent) .card-body {
  background-color: var(--body-bg-nightmode) !important;
}

/* Fallback for browsers that don't support :has() */
#blogside .card > .card-header.bg-transparent {
  border-radius: 12px 12px 0 0 !important;
  background-color: var(--body-bg-color) !important;
}

#blogside .card > .card-header.bg-transparent + .card-body {
  border-radius: 0 0 12px 12px !important;
  background-color: var(--body-bg-color) !important;
}

.card .card-body .d-grid .btn.btn-outline-primary {
  background-color: var(--header-bg-color) !important;
  border: 1px solid var(--header-bg-color) !important;
  border-radius: 12px !important;
}

.card .card-body .d-grid .btn.btn-outline-primary:hover {
  background-color: var(--body-text-color) !important;
}


body.night-mode .card .card-body .d-grid .btn.btn-outline-primary {
  background-color: var(--header-bg-color-nightmode) !important;
  border: 1px solid var(--header-bg-color-nightmode) !important;
  color: var(--body-text-color-nightmode);
}

body.night-mode .card .card-body .d-grid .btn.btn-outline-primary:hover {
  background-color: var(--body-text-color-nightmode) !important;
  color: var(--header-bg-color-nightmode);
}



.ui-box .user-actions {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  border-top: 1px solid var(--body-bg-color);
  padding-top: 10px;
  margin-top: auto;
}

body.night-mode .ui-box .user-actions {
  border-top: 1px solid var(--body-bg-nightmode);
}

.ui-box .button-wrapper {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px; 
  position: relative;
}

.ui-box .button-wrapper .btn {
  flex: 1;
  margin: 0;
  border: none; 
  position: relative;
}

.ui-box .button-wrapper .btn:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 0;
  right: -5px; 
  height: 100%;
  width: 1px;
  background-color: var(--body-bg-color);
}

body.night-mode .ui-box .button-wrapper .btn:not(:last-child)::after {
  background-color: var(--body-bg-nightmode);
}

.ui-box .single-button {
  margin: 0 auto;
  display: block;
  text-align: center;
  width: 100%; 
}


@media (max-width: 768px) {
  .d-flex.align-items-center.ml-auto {
      visibility: hidden;
  }
}

@media (min-width: 1017px) and (max-width: 1300px) {
  .top-filters-index {
    margin-bottom: -30px !important;
  }
  
  .posts-filter {
    margin-top: 10px;
  }
}


.col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav .mb20 {
  visibility: hidden;
  margin-top: -50px;
}

.col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav {
  background-color: var(--body-bg-color);
}

body.night-mode .col-lg-9.main-center-panel .col-12 .card .card-header.with-icon.with-nav {
  background-color: var(--body-bg-nightmode);
}



.publisher-mini .form-label {
  color: var(--body-text-color);
}

body.night-mode .publisher-mini .form-label {
  color: var(--body-text-color-nightmode);
}


body.night-mode .btn-social-icon.btn-sm {
  color: #FFF;
}


body.night-mode .modal-header.btn-close {
  color: var(--body-text-color-nightmode);
}


body.night-mode .user-actions.mt10 .button-wrapper .btn.btn-sm.js_chat-start .svg-container.main-icon2 {
  color: var(--body-text-color-nightmode) !important;
  fill: var(--body-text-color-nightmode) !important;
}


.btn-social-icon {
  background-color: black;
  color: white;
  width: 40px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
}

.btn-social-icon i {
  color: white;
}

.btn-social-icon:hover {
  background-color: #333;
}

body.night-mode .btn-social-icon {
  background-color: white;
  color: black;
}

body.night-mode .btn-social-icon i {
  color: black;
}

body.night-mode .btn-social-icon:hover {
  background-color: #f0f0f0;
}


.js_scroller {
  min-height: 305px;
}



.btn-group.js_publisher-privacy .btn.dropdown-toggle {
  padding: 0px 5px 0px 0px;
  border:0px;
}

.btn-group.js_publisher-privacy .btn.dropdown-toggle.show {
  border: 0px;
}


.search-container {
  position: relative;
  display: flex;
  align-items: center;
}

#search-bar {
  display: none;
  position: absolute;
  top: 20px;
  right: 0;
  transform: translateY(-50%);
  transition: width 0.3s ease-in-out, right 0.3s ease-in-out;
  white-space: nowrap;
  overflow: visible;
  padding: 5px;
  z-index: 1000;
  width: 0;
}

.search-container.open #search-bar {
  display: block;
  width: 264px;  
  right: 0;
  top: 20px;
}

.search-container.open #search-bar .search-wrapper.d-none.d-md-block {
  top: 24px;
}

#search-icon {
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
  z-index: 1001;
  padding: 5px;
  position: absolute;
  right: 0;
  top: 20px;
  transform: translateY(-50%);
}

.search-container.open #search-icon {
  transform: translateY(-50%) translateX(-235px); 
}

@media (max-width: 1250px) {
  #logo {
    transition: margin-left 0.3s ease-in-out;
  }

  .search-container.open #logo {
    margin-left: -264px;
  }
}





body.night-mode .btn-group.js_publisher-privacy .btn.dropdown-toggle {
  color: var(--body-text-color-nightmode);
}


.sidebar-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
  position: relative; 
}
.sidebar-footer {
  padding: 10px 15px;
  position: relative; 
  width: 500px; 
  max-width: 500px; 
  box-sizing: border-box;
}
.footer-links {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0;
}
.footer-links li {
  margin-right: 10px;
}
.footer-links a {
  text-decoration: none;
}
.footer-links a:hover {
  text-decoration: underline;
}


.progress-bar {
  background-color: var(--body-text-color);
}

body.night-mode .progress-bar {
  background-color: var(--link-color-nightmode) !important;
}


.profile-badges {
  display: flex;
  justify-content: center; 
  align-items: center; 
}

.profile-badge {
  margin-right: 10px;
}

.profile-badge:last-child {
  margin-right: 0;
}


.post-colored.custom-scrollbar .post-colored-text-wrapper.js_scroller .post-text {
  background: transparent !important;
}

.x-image#profile_designer_images {
  width: 167px;
  height: 167px;
}



.img-stretch {
  height: 250px; 
  object-fit: cover; 
  object-position: center;
  width: 100%; 
}

.carousel-control-prev,
.carousel-control-next {
  top: 50%; 
  transform: translateY(-50%);
}

.product-meta {
  margin-bottom: 10px;
}

.product-meta .price {
  font-weight: bold;
  color: var(--body-text-color);
}

.product-info .product-meta.title .title {
  font-size: 1.1em;
  font-weight: bold;
  color: var(--body-text-color);
}

body.night-mode .product-meta .price {
  color: var(--body-text-color-nightmode);
}

body.night-mode .product-info .product-meta.title .title {
  color: var(--body-text-color-nightmode);
}


.card.product {
  border: 1px solid var(--header-bg-color);
}

body.night-mode .card.product {
  border: 1px solid var(--header-bg-color-nightmode);
}

body.night-mode .btn-group-text {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-text:hover {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-text:active {
  color: var(--body-text-color-nightmode);
}

body.night-mode .dropdown-toggle::after {
  color: var(--body-text-color-nightmode);
}

body.night-mode .btn-group-icon.fa.fa-list.mr10 {
  color: var(--body-text-color-nightmode);
}

/* Schedule dropdown styling - Bootstrap native dropdown */
.schedule-dropdown-menu {
  min-width: 280px;
  padding: 15px;
  background-color: var(--body-bg-color);
  border: none;
  border-radius: 0;
  box-shadow: 0 0.5rem 0.5rem rgba(0, 0, 0, 0.2);
}

body.night-mode .schedule-dropdown-menu {
  background-color: var(--body-bg-nightmode);
  border: none;
  color: #fff;
}

.schedule-dropdown-menu .dropdown-header {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 10px;
  padding: 0;
}

body.night-mode .schedule-dropdown-menu .dropdown-header {
  color: var(--body-text-color-nightmode);
}

.schedule-dropdown-menu .dropdown-item-text {
  padding: 0;
}

.schedule-dropdown-menu .form-control {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  background-color: #fff;
  color: #495057;
  font-size: 14px;
}

body.night-mode .schedule-dropdown-menu .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

.schedule-dropdown-menu .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

body.night-mode .schedule-dropdown-menu .form-control:focus {
  border-color: var(--body-text-color-nightmode);
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2);
}

/* Make the schedule button group positioned relatively */
.js_publisher-schedule {
  position: relative;
}

/* Hide the fake wrapper element completely by default */
#schedule-toggle-wrapper {
  display: none !important;
  visibility: hidden !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
}

/* Allow the wrapper to be shown when scheduling is active - but keep it invisible */
#schedule-toggle-wrapper.schedule-active {
  display: block !important;
  visibility: visible !important;
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Ensure schedule dropdown doesn't go off-screen */
.schedule-dropdown-menu {
  max-width: calc(100vw - 20px);
  left: auto !important;
  right: 0 !important;
}

@media (max-width: 768px) {
  .schedule-dropdown-menu {
    left: 0 !important;
    right: auto !important;
    max-width: calc(100vw - 40px);
  }
}

/* Schedule button styling - matches privacy/scenes buttons */
.js_publisher-schedule-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.375rem 0.75rem;
  text-decoration: none !important;
}

.js_publisher-schedule-toggle:hover {
  text-decoration: none !important;
}

.js_publisher-schedule-toggle:focus {
  text-decoration: none !important;
}

.js_publisher-schedule-toggle .btn-group-icon {
  color: #000000;
}

body.night-mode .js_publisher-schedule-toggle .btn-group-icon {
  color: #ffffff;
}

.js_publisher-schedule-toggle .btn-group-text {
  color: #000000;
}

body.night-mode .js_publisher-schedule-toggle .btn-group-text {
  color: #ffffff;
}

/* Schedule button active state - grey when active */
.js_publisher-schedule-toggle.active .btn-group-icon {
  color: #909090 !important;
}

body.night-mode .js_publisher-schedule-toggle.active .btn-group-icon {
  color: #909090 !important;
}

.js_publisher-schedule-toggle.active .btn-group-text {
  color: #909090 !important;
}

body.night-mode .js_publisher-schedule-toggle.active .btn-group-text {
  color: #909090 !important;
}

/* Article schedule button styling */
.js_article-schedule-toggle {
  background: transparent !important;
  border: none !important;
  padding: 0.375rem 0.75rem;
}

.js_article-schedule-toggle svg {
  fill: #000000;
}

body.night-mode .js_article-schedule-toggle svg {
  fill: #ffffff;
}

/* Article schedule button hover state */
.js_article-schedule-toggle:hover {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  --bs-btn-hover-color: inherit !important;
  --bs-btn-hover-bg: transparent !important;
  --bs-btn-hover-border-color: transparent !important;
}

.js_article-schedule-toggle:hover svg {
  fill: #000000 !important;
}

body.night-mode .js_article-schedule-toggle:hover svg {
  fill: #ffffff !important;
}

/* Article schedule button active state - keep transparent */
.js_article-schedule-toggle.active {
  background: transparent !important;
  border: none !important;
  color: inherit !important;
  --bs-btn-active-color: inherit !important;
  --bs-btn-active-bg: transparent !important;
  --bs-btn-active-border-color: transparent !important;
}

.js_article-schedule-toggle.active svg {
  fill: #000000 !important;
}

body.night-mode .js_article-schedule-toggle.active svg {
  fill: #ffffff !important;
}

/* Schedule toggle wrapper styling */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 10px;
  margin-top: 10px;
  width: 50%;
  margin-left: auto;
  margin-right: 0;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0;
  padding: 6px 10px;
  background-color: #fff;
  color: #495057;
  font-size: 14px;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}


body.night-mode #group_15 .checkbox-buttons svg {
  fill: var(--top-menu-icons-nightmode);
}

body.night-mode .post-scene .text-muted {
  color: var(--body-text-color-nightmode) !important;
}

body.night-mode .svg-container.mr10 svg,
body.night-mode .svg-container.mr10 svg * {
  fill: var(--top-menu-icons-nightmode) !important;
  color: var(--top-menu-icons-nightmode) !important;
}

#blogside {
  padding: 20px !important;
  padding-top: 0px !important;
  background-color: var(--bg-bg-color);
}

body.night-mode #blogside {
  background-color: var(--bg-bg-color-nightmode);
}

.article-wrapper.pb10 {
  background-color: var(--body-bg-color) !important;
  padding: 20px 33px 10px 33px !important;
}

body.night-mode .article-wrapper.pb10 {
  background-color: var(--body-bg-color-nightmode) !important;
}

.editorial-author__name-link,
.editorial-author__link {
  color: var(--link-color);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
}

.editorial-author__link:hover {
  text-decoration: underline;
  color: var(--link-color);
}

body.night-mode .editorial-author__name-link,
body.night-mode .editorial-author__link {
  color: var(--link-color-nightmode);
}

body.night-mode .editorial-author__link:hover {
  color: var(--link-color-nightmode);
}

.editorial-list-item {
  background: var(--header-bg-color);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  margin: 0 0.75rem 1.5rem 0.75rem;
  transition: all 0.3s ease;
  border-radius: 12px !important;
}

body.night-mode .editorial-list-item {
  background: var(--header-bg-color-nightmode);
}

/* Blog sidebar editorial list items use bg-bg-color */
#blogside .editorial-list-item {
  background: var(--bg-bg-color) !important;
}

body.night-mode #blogside .editorial-list-item {
  background: var(--bg-bg-color-nightmode) !important;
}

/* Ensure editorial list item container and image have proper border-radius */
.editorial-list-item__container {
  border-radius: 12px !important;
  overflow: hidden !important;
}

.editorial-list-item__image {
  border-radius: 12px 0 0 12px !important;
  overflow: hidden !important;
}

.editorial-list-item__container--no-image {
  border-radius: 12px !important;
}

/* Input group border-radius for search forms */
.input-group .form-control {
  border-radius: 12px 0 0 12px !important;
}

.input-group .btn-search {
  border-radius: 0 12px 12px 0 !important;
}

/* Smaller badges in editorial author section */
.editorial-author .verified-badge,
.editorial-author .special-badge {
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.editorial-author .verified-badge svg,
.editorial-author .verified-badge .svg-container svg {
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

.editorial-author .verified-badge .svg-container {
  width: 15px !important;
  height: 15px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.editorial-author .special-badge img {
  width: 15px !important;
  height: 15px !important;
  vertical-align: middle !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}

/* Align the inline-flex container to center badges with text */
.editorial-author div[style*="inline-flex"] {
  align-items: center !important;
  vertical-align: middle !important;
  line-height: 1.2 !important;
}

/* Ensure the author name link has consistent line-height */
.editorial-author .editorial-author__name-link,
.editorial-author .editorial-author__link {
  line-height: 1.2 !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

/* Reduce gap between author name and time in editorial list items */
.editorial-list-item__meta {
  gap: 0.5rem !important;
}


.editorial-list-item__excerpt {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--body-text-color);
  margin: 0 0 1.25rem 0;
  flex-grow: 1;
}

body.night-mode .editorial-list-item__excerpt {
  color: var(--body-text-color-nightmode);
}

.editorial-list-item__title-link:hover {
  color: var(--link-color);
  text-decoration: none;
}

body.night-mode .editorial-list-item__title-link:hover {
  color: var(--link-color-nightmode);
}

.btn-blog,
.btn-blog.disabled,
.btn-blog:disabled,
.btn-blog:not(:disabled):not(.disabled).active,
.btn-blog:not(:disabled):not(.disabled):active,
.show>.btn-blog.dropdown-toggle {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-blog {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
}

.btn-blog:hover {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-blog.focus,
.btn-blog:focus {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 0 rgba(45, 206, 137, 0.5);
}

.btn-blog:not(:disabled):not(.disabled).active:focus,
.btn-blog:not(:disabled):not(.disabled):active:focus,
.show>.btn-blog.dropdown-toggle:focus {
  box-shadow: none;
}

body.night-mode .btn-blog,
body.night-mode .btn-blog.disabled,
body.night-mode .btn-blog:disabled,
body.night-mode .btn-blog:not(:disabled):not(.disabled).active,
body.night-mode .btn-blog:not(:disabled):not(.disabled):active,
body.night-mode .show>.btn-blog.dropdown-toggle {
  color: var(--body-bg-nightmode);
  border-color: var(--body-text-color-nightmode);
  background-color: var(--body-text-color-nightmode);
}

.btn-search,
.btn-search.disabled,
.btn-search:disabled,
.btn-search:not(:disabled):not(.disabled).active,
.btn-search:not(:disabled):not(.disabled):active,
.show>.btn-search.dropdown-toggle {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-search {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 12px !important;
}

.btn-search:hover {
  color: var(--body-bg-color);
  border-color: var(--body-text-color);
  background-color: var(--body-text-color);
}

.btn-search.focus,
.btn-search:focus {
  box-shadow: 0 4px 3px rgba(50, 50, 93, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2),
    0 0 0 0 rgba(247, 250, 252, 0.5);
}

.btn-search:not(:disabled):not(.disabled).active:focus,
.btn-search:not(:disabled):not(.disabled):active:focus,
.show>.btn-search.dropdown-toggle:focus {
  box-shadow: none;
}

body.night-mode .btn-search,
body.night-mode .btn-search.disabled,
body.night-mode .btn-search:disabled,
body.night-mode .btn-search:not(:disabled):not(.disabled).active,
body.night-mode .btn-search:not(:disabled):not(.disabled):active,
body.night-mode .show>.btn-search.dropdown-toggle {
  color: var(--body-bg-nightmode);
  border-color: var(--body-text-color-nightmode);
  background-color: var(--body-text-color-nightmode);
}

.data-container.small .data-avatar img {
  border-radius: 0 !important;
}

@media (min-width: 768px) {
  .data-container.small .data-avatar img {
    border-radius: 0 !important;
  }
}

.mention-avatar {
  border: 2px solid #e9eaee;
  transition: border-color 0.2s ease;
  border-radius: 0 !important;
  vertical-align: text-top;
  position: relative;
  top: -3px;
  margin-right: 0px !important;
}

.mention-avatar:hover {
  border-color: var(--primary-color);
}

.post-text .js_user-popover {
  text-decoration: none;
}

.post-text .js_user-popover a {
  text-decoration: none;
  color: var(--username-color);
}

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

/* Better spacing for albums grid */
.panel-photos .row .album-card {
  margin-bottom: 20px;
}

/* Main albums page styling - now handled by unified overlay styles above */

/* Main albums page album details - now handled by overlay styles above */

/* Main albums page tab navigation - now handled by unified styles above */

/* Main albums page card header */
.col-12 .card .card-header.with-icon.with-nav {
  border-bottom: none;
  padding: 20px 20px 0 20px;
}

.col-12 .card .card-body {
  padding: 20px;
}

/* Responsive adjustments for main albums page */
@media (max-width: 768px) {
  .col-12 .card .album-card {
    margin-bottom: 15px;
  }
  
  .col-12 .card .card-header.with-icon.with-nav {
    padding: 15px 15px 0 15px;
  }
  
  .col-12 .card .card-body {
    padding: 15px;
  }
  
  .col-12 .card .nav-tabs .nav-link {
    padding: 8px 15px;
    font-size: 0.9em;
  }
}

@media (max-width: 576px) {
  .col-12 .card .album-card {
    margin-bottom: 10px;
  }
  
  .col-12 .card .card-header.with-icon.with-nav {
    padding: 10px 10px 0 10px;
  }
  
  .col-12 .card .card-body {
    padding: 10px;
  }
  
  .col-12 .card .nav-tabs .nav-link {
    padding: 6px 12px;
    font-size: 0.85em;
  }
}

/* Instagram-style 3-column grid for photos */


/* Fix side panel photos background to match other side panel cards */
.theiaStickySidebar .card.panel-photos {
  background-color: #fff !important;
}

.theiaStickySidebar .card.panel-photos .card-body {
  background-color: #fff !important;
}

body.night-mode .theiaStickySidebar .card.panel-photos {
  background-color: var(--card-dark-color) !important;
}

body.night-mode .theiaStickySidebar .card.panel-photos .card-body {
  background-color: var(--card-dark-color) !important;
}

/* Instagram-style 3-column grid for photos (main photos page only) */
.col-12 .card.panel-photos .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
}

.col-12 .card.panel-photos .row .col-6,
.col-12 .card.panel-photos .row .col-md-4,
.col-12 .card.panel-photos .row .col-lg-2 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-photos .row .pg_photo {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  overflow: hidden !important;
}

.col-12 .card.panel-photos .row .pg_photo:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Responsive adjustments for Instagram grid */
@media (max-width: 768px) {
  .col-12 .card.panel-photos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-photos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

/* 3-column grid for albums (main albums page only) */
.col-12 .card.panel-albums {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Videos panel border-radius */
.col-12 .card.panel-videos {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Connections panel border-radius */
.col-12 .card.panel-connections {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Followers panel border-radius */
.col-12 .card.panel-followers {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Followings panel border-radius */
.col-12 .card.panel-followings {
  border-radius: 12px !important;
  overflow: hidden;
}

/* Instagram-style 3-column grid for videos (main videos page only) */
.col-12 .card.panel-videos .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

.col-12 .card.panel-videos .row .col-6,
.col-12 .card.panel-videos .row .col-md-4,
.col-12 .card.panel-videos .row .col-lg-3 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-videos .row .pg_video {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 12px !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
  overflow: hidden !important;
}

.col-12 .card.panel-videos .row .pg_video:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Responsive adjustments for videos grid */
@media (max-width: 768px) {
  .col-12 .card.panel-videos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-videos .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

.col-12 .card.panel-albums .btn.btn-primary {
  border-radius: 12px !important;
}

.album-buttons .btn {
  border-radius: 12px !important;
}

.col-12 .card.panel-albums .row .col-sm-6,
.col-12 .card.panel-albums .row .col-md-4,
.col-12 .card.panel-albums .row .col-lg-3 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.col-12 .card.panel-albums .row {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
  margin: 0 !important;
  list-style: none !important;
  padding: 0 !important;
}

/* Responsive adjustments for albums grid */
@media (max-width: 768px) {
  .col-12 .card.panel-albums .row {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
}

@media (max-width: 576px) {
  .col-12 .card.panel-albums .row {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
}

/* Side panel photos row gap */
.theiaStickySidebar .card .row .col-4 {
  margin-bottom: 4px !important;
}

/* Side panel photos grid layout - specific to photos only */
.theiaStickySidebar .card .row .col-4 .pg_photo {
  aspect-ratio: 1 !important;
  width: 100% !important;
  height: auto !important;
  background-size: cover !important;
  background-position: center !important;
  border-radius: 0 !important;
  border: none !important;
  transition: transform 0.2s ease !important;
  display: block !important;
}

.theiaStickySidebar .card .row .col-4 .pg_photo:hover {
  transform: scale(1.05) !important;
  border: none !important;
}

/* Side panel photos uniform grid gaps - specific to photos only */
.theiaStickySidebar .card .row .col-4 {
  width: 100% !important;
  max-width: none !important;
  flex: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Only apply grid to rows that contain photos */
.theiaStickySidebar .card .row:has(.pg_photo) {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  margin: 0 !important;
}

/* Date and time input icons in night mode - more specific targeting */
body.night-mode input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 1 !important;
}

body.night-mode input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
  opacity: 1 !important;
}

body.night-mode input[type="date"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

body.night-mode input[type="time"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

/* Alternative approach for Firefox */
body.night-mode input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

body.night-mode input[type="time"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

/* Night mode focus state for schedule form controls */
body.night-mode #schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color-nightmode) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2) !important;
}

/* Keep publisher overlay when pickers are open */
.publisher.picker-open .publisher-overlay {
  display: block !important;
}

/* Responsive behavior for schedule wrapper */
@media (max-width: 768px) {
  #schedule-toggle-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
}

/* Custom Date/Time Picker Styling */
.custom-date-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 20px;
  z-index: 10001;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}

.custom-time-picker {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  padding: 20px;
  z-index: 10000;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.3);
  min-width: 300px;
}

body.night-mode .custom-date-picker {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

body.night-mode .custom-time-picker {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

.custom-date-picker .date-picker-header,
.custom-time-picker .time-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  font-weight: 600;
  color: var(--body-text-color);
}

body.night-mode .custom-date-picker .date-picker-header,
body.night-mode .custom-time-picker .time-picker-header {
  color: var(--body-text-color-nightmode);
}

.custom-date-picker .prev-month,
.custom-date-picker .next-month {
  background: transparent;
  border: 1px solid var(--body-text-color);
  color: var(--body-text-color);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 0;
}

body.night-mode .custom-date-picker .prev-month,
body.night-mode .custom-date-picker .next-month {
  border-color: var(--body-text-color-nightmode);
  color: var(--body-text-color-nightmode);
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.day-header {
  text-align: center;
  font-weight: 600;
  padding: 8px;
  color: var(--body-text-color);
  font-size: 12px;
}

body.night-mode .day-header {
  color: var(--body-text-color-nightmode);
}

.day {
  text-align: center;
  padding: 8px;
  cursor: pointer;
  color: var(--body-text-color);
  border: 1px solid transparent;
}

body.night-mode .day {
  color: var(--body-text-color-nightmode);
}

.day:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

body.night-mode .day:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.day.selected {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
}

body.night-mode .day.selected {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

.day.empty {
  cursor: default;
  opacity: 0.3;
}

/* Time picker styling */
.custom-time-picker .time-picker-body {
  text-align: center;
}

.time-lists {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  justify-content: center;
}

.hour-list-container,
.minute-list-container {
  text-align: center;
}

.list-label {
  font-weight: 600;
  margin-bottom: 10px;
  color: var(--body-text-color);
  font-size: 14px;
}

body.night-mode .list-label {
  color: var(--body-text-color-nightmode);
}

.hour-list,
.minute-list {
  height: 200px;
  overflow-y: auto;
  border: 1px solid #ddd;
  border-radius: 0;
  background-color: var(--header-bg-color);
  width: 80px;
}

body.night-mode .hour-list,
body.night-mode .minute-list {
  border-color: #444;
  background-color: var(--header-bg-color-nightmode);
}

.time-item {
  padding: 10px;
  cursor: pointer;
  color: var(--body-text-color);
  border-bottom: 1px solid #eee;
  text-align: center;
  font-weight: 500;
}

body.night-mode .time-item {
  color: var(--body-text-color-nightmode);
  border-bottom-color: #444;
}

.time-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

body.night-mode .time-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.time-item.selected {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
}

body.night-mode .time-item.selected {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

.custom-time-picker .time-display {
  font-size: 24px;
  font-weight: 600;
  margin: 15px 0;
  color: var(--body-text-color);
}

body.night-mode .custom-time-picker .time-display {
  color: var(--body-text-color-nightmode);
}

.custom-time-picker .set-time {
  background-color: var(--body-text-color);
  color: var(--header-bg-color);
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  border-radius: 0;
  font-weight: 600;
}

body.night-mode .custom-time-picker .set-time {
  background-color: var(--body-text-color-nightmode);
  color: var(--header-bg-color-nightmode);
}

/* Date/Time picker selected items - remove blue */
input[type="date"]::-webkit-calendar-picker-indicator:focus,
input[type="time"]::-webkit-calendar-picker-indicator:focus {
  background-color: transparent !important;
}

/* Date picker dropdown styling */
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--body-text-color) !important;
}

body.night-mode input[type="date"]::-webkit-datetime-edit-text,
body.night-mode input[type="date"]::-webkit-datetime-edit-month-field,
body.night-mode input[type="date"]::-webkit-datetime-edit-day-field,
body.night-mode input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--body-text-color-nightmode) !important;
}

/* Time picker styling */
input[type="time"]::-webkit-datetime-edit-text,
input[type="time"]::-webkit-datetime-edit-hour-field,
input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--body-text-color) !important;
}

body.night-mode input[type="time"]::-webkit-datetime-edit-text,
body.night-mode input[type="time"]::-webkit-datetime-edit-hour-field,
body.night-mode input[type="time"]::-webkit-datetime-edit-minute-field {
  color: var(--body-text-color-nightmode) !important;
}

/* Date/Time picker dropdown selections - remove blue highlighting */
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: transparent !important;
}

/* Override browser's native blue selection in date/time pickers */
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  background-color: transparent !important;
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper:focus,
input[type="time"]::-webkit-datetime-edit-fields-wrapper:focus {
  background-color: transparent !important;
  outline: none !important;
}

/* Remove blue selection from date/time picker dropdowns */
input[type="date"]::-webkit-calendar-picker-indicator:active,
input[type="time"]::-webkit-calendar-picker-indicator:active {
  background-color: transparent !important;
}

/* Override any blue selection states */
input[type="date"]::-webkit-datetime-edit-text:focus,
input[type="date"]::-webkit-datetime-edit-month-field:focus,
input[type="date"]::-webkit-datetime-edit-day-field:focus,
input[type="date"]::-webkit-datetime-edit-year-field:focus,
input[type="time"]::-webkit-datetime-edit-text:focus,
input[type="time"]::-webkit-datetime-edit-hour-field:focus,
input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background-color: transparent !important;
  color: var(--body-text-color) !important;
  outline: none !important;
}

body.night-mode input[type="date"]::-webkit-datetime-edit-text:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-month-field:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-day-field:focus,
body.night-mode input[type="date"]::-webkit-datetime-edit-year-field:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-text:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-hour-field:focus,
body.night-mode input[type="time"]::-webkit-datetime-edit-minute-field:focus {
  background-color: transparent !important;
  color: var(--body-text-color-nightmode) !important;
  outline: none !important;
}

/* More aggressive approach to override browser picker styling */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  background: none !important;
  color: inherit !important;
}

input[type="time"]::-webkit-calendar-picker-indicator {
  filter: none !important;
  background: none !important;
  color: inherit !important;
}

/* Try to override the actual picker popup */
input[type="date"]::-webkit-calendar-picker-indicator:active,
input[type="time"]::-webkit-calendar-picker-indicator:active {
  filter: none !important;
  background: none !important;
}

/* Alternative: Hide the native picker and use a custom one */
input[type="date"]::-webkit-calendar-picker-indicator {
  opacity: 0 !important;
  position: absolute !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  cursor: pointer !important;
}

/* Schedule toggle wrapper styling - square design */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  padding: 15px;
  margin-top: 10px;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0 !important;
  padding: 8px 12px;
  background-color: #fff;
  color: #495057;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}


/* Article Schedule System Styling */
/* ------------------------------- */

/* Article schedule toggle wrapper styling */
#schedule-toggle-wrapper {
  background-color: var(--header-bg-color);
  border: 1px solid #e0e0e0;
  border-radius: 0 !important;
  padding: 15px;
  margin-top: 10px;
}

body.night-mode #schedule-toggle-wrapper {
  background-color: var(--header-bg-color-nightmode);
  border-color: #444;
}

#schedule-toggle-wrapper label {
  font-weight: 600;
  color: var(--body-text-color);
  margin-bottom: 8px;
}

body.night-mode #schedule-toggle-wrapper label {
  color: var(--body-text-color-nightmode);
}

#schedule-toggle-wrapper .form-control {
  border: 1px solid #ddd;
  border-radius: 0 !important;
  padding: 8px 12px;
  background-color: #fff;
  color: #495057;
}

body.night-mode #schedule-toggle-wrapper .form-control {
  background-color: #2a2a2a;
  border-color: #444;
  color: #fff;
}

#schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color);
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.2);
}

body.night-mode #schedule-toggle-wrapper .form-control:focus {
  border-color: var(--body-text-color-nightmode) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.2) !important;
}

/* Date/Time input icons for articles */
#schedule-toggle-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) !important;
}

#schedule-toggle-wrapper input[type="date"]::-webkit-inner-spin-button {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-webkit-inner-spin-button {
  filter: invert(1) !important;
}

#schedule-toggle-wrapper input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(0) !important;
}

body.night-mode #schedule-toggle-wrapper input[type="date"]::-moz-calendar-picker-indicator {
  filter: invert(1) !important;
}

#search-history,
#search-results {
  border-radius: 12px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Remove box shadow from list mode posts on mobile */
@media (max-width: 768px) {
  .js_posts_stream.list-view .post {
    box-shadow: none !important;
  }
}

/* Account Switcher: Verified badge spacing and size */
.modal-body .feeds-item .data-content .mt5 .account-switcher-badge {
  margin-left: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  vertical-align: middle !important;
}

.modal-body .feeds-item .data-content .mt5 .account-switcher-badge .svg-container {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.modal-body .feeds-item .data-content .mt5 .account-switcher-badge svg {
  width: 16px !important;
  height: 16px !important;
}

/* Account Switcher: Add Account button border radius */
.modal-body .account-switcher-add-btn {
  border-radius: 12px !important;
}