/* ============================================================
   Meta Official Fonts (Extracted from Facebook Android APK)
   Optimistic VF, Optimistic Display, Optimistic Text
   ============================================================ */

@font-face {
  font-family: 'Optimistic VF';
  src: url('../fonts/Optimistic_VF_App_Lite.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic Display';
  src: url('../fonts/Optimistic_Display_A_Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic Display';
  src: url('../fonts/Optimistic_Display_A_Md.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic Text';
  src: url('../fonts/Optimistic_Text_A_Bd.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic Text';
  src: url('../fonts/Optimistic_Text_A_Md.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Optimistic Text';
  src: url('../fonts/Optimistic_Text_A_Rg.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Facebook Sans';
  src: url('../fonts/FacebookSans_A_HeIt.ttf') format('truetype');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

:root {
  --fb-font-family: 'Optimistic VF', 'Optimistic Text', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fb-font-display: 'Optimistic Display', 'Optimistic VF', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --fb-blue: #0866ff;
  --fb-sec-bg: #e4e6eb;
  --fb-hover: #f0f2f5;
  --fb-card-border: #ced0d4;
  --fb-text: #050505;
  --fb-muted: #65676b;
  --fb-dark-bg: #18191a;
  --fb-dark-card: #242526;
  --fb-dark-divider: #3e4042;
  --fb-dark-hover: #3a3b3c;
  --fb-dark-input: #3a3b3c;
  --fb-dark-text: #e4e6eb;
  --fb-dark-muted: #b0b3b8;
}

html,
body,
input,
button,
select,
textarea,
.form-control,
.btn {
  font-family: var(--fb-font-family) !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6,
.fb-mob-title,
.fb-logo,
.main-title {
  font-family: var(--fb-font-display) !important;
}

/* ------------------------------------------------------------
   1. HEADER (52px)
   ------------------------------------------------------------ */

body {
  /* 52px for Facebook header */
  padding-top: 52px !important;
}

body.logged-in {
  /* 52px header + 52px mobile tabs */
  padding-top: 104px !important;
}

@media (min-width: 992px) {
  body.logged-in {
    padding-top: 52px !important;
  }
}

body.n_activated,
body.n_live {
  /* 50px top bar + 52px header */
  padding-top: 102px !important;
}

body.n_activated.logged-in,
body.n_live.logged-in {
  padding-top: 154px !important;
}

@media (min-width: 992px) {

  body.n_activated.logged-in,
  body.n_live.logged-in {
    padding-top: 102px !important;
  }
}

.main-header {
  height: auto !important;
  background: #fff !important;
  border-bottom: 1px solid #e4e6eb;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.main-header .container,
.main-header .container-fluid {
  max-width: 100% !important;
}

body.night-mode .main-header {
  background: var(--fb-dark-card) !important;
  border-bottom: 1px solid var(--fb-dark-divider);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.fb-header {
  display: flex;
  flex-direction: column;
}

.fb-hrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 52px;
  min-height: 52px;
}

/* left: logo + search */
.fb-hleft {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 1 auto;
  min-width: 0;
}

.fb-hleft .menu-icon {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  padding: 0;
  border-radius: 50%;
  color: #050505 !important;
}

.fb-hleft .menu-icon:hover {
  background: var(--fb-hover);
}

body.night-mode .fb-hleft .menu-icon {
  color: var(--fb-dark-text) !important;
}

body.night-mode .fb-hleft .menu-icon:hover {
  background: var(--fb-dark-hover);
}

.fb-logo {
  display: flex;
  align-items: center;
  height: 52px;
  text-decoration: none !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  color: #1877f2 !important;
  letter-spacing: -1px !important;
  line-height: 1 !important;
}

.fb-logo:hover {
  text-decoration: none !important;
  color: #1877f2 !important;
}

body.night-mode .fb-logo {
  color: #2997ff !important;
}

.fb-logo img {
  max-height: 40px;
  width: auto;
}

.fb-hleft .search-wrapper {
  margin-inline-start: 4px;
}

.fb-hleft .search-wrapper .form-control {
  height: 40px;
  width: 220px;
  margin: 0;
  padding-inline-start: 16px;
  padding-inline-end: 38px;
  background: var(--fb-hover);
  border: 0 none;
  border-radius: 50px;
  font-size: 14px;
  box-shadow: none;
  color: var(--fb-text);
}

body.night-mode .fb-hleft .search-wrapper .form-control {
  background: var(--fb-dark-input);
  color: var(--fb-dark-text);
}

.fb-hleft .search-wrapper .search-input-icon {
  top: 10px;
  right: 14px;
  display: block;
}

html[dir="RTL"] .fb-hleft .search-wrapper .search-input-icon {
  right: auto;
  left: 14px;
}

/* center: main nav (md+) */
.fb-nav {
  flex: 1;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 2px;
  height: 52px;
  min-width: 0;
  padding: 4px 0 0;
}

.fb-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  max-width: 96px;
  min-width: 64px;
  height: 48px;
  border-radius: 8px;
  color: var(--fb-muted);
  transition: background 0.15s ease;
}

.fb-nav-item svg {
  width: 24px;
  height: 24px;
}

.fb-nav-item:hover {
  background: var(--fb-hover);
  color: inherit;
}

body.night-mode .fb-nav-item:hover {
  background: var(--fb-dark-hover);
}

.fb-nav-item.active {
  color: var(--fb-blue);
}

.fb-nav-item.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--fb-blue);
  border-radius: 3px 3px 0 0;
}

/* right: actions */
.fb-hright {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.fb-hright .navbar-wrapper>ul {
  gap: 4px;
  align-items: center;
}

.fb-hright .navbar-wrapper>ul>li {
  flex: none;
  margin: 0;
}

.fb-hright .navbar-wrapper>ul>li>a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  line-height: normal;
  color: #050505 !important;
}

body.night-mode .fb-hright .navbar-wrapper>ul>li>a {
  color: #e4e6eb !important;
}

.fb-hright .header-icon {
  color: #050505 !important;
  fill: #050505 !important;
}

body.night-mode .fb-hright .header-icon {
  color: #e4e6eb !important;
  fill: #e4e6eb !important;
}

.fb-hright .navbar-wrapper>ul>li>a:hover {
  background: var(--fb-hover);
}

body.night-mode .fb-hright .navbar-wrapper>ul>li>a:hover {
  background: var(--fb-dark-hover);
}

.fb-hright .navbar-wrapper .counter {
  top: 2px;
  right: 0;
  border: 2px solid #fff;
}

body.night-mode .fb-hright .navbar-wrapper .counter {
  border-color: var(--fb-dark-card);
}

.fb-hright .user-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 40px;
  border-radius: 50%;
}

.fb-hright .user-menu>img {
  height: 36px;
  width: 36px;
  margin: 0;
  border-radius: 50%;
}

.fb-hright .user-menu .title {
  display: none;
}

/* ============================================================
   VISITOR HEADER TOP LOGIN BAR (Facebook 1:1 Matching Screenshot)
   ============================================================ */
.fb-visitor-toplogin-wrap {
  display: flex !important;
  align-items: center !important;
}

.fb-visitor-toplogin-form {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-vtop-input-group {
  position: relative !important;
}

.fb-vtop-input {
  height: 34px !important;
  width: 175px !important;
  padding: 0 10px !important;
  font-size: 13px !important;
  color: #1c1e21 !important;
  background-color: #ffffff !important;
  border: 1px solid #ccd0d5 !important;
  border-radius: 4px !important;
  outline: none !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075) !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
  box-sizing: border-box !important;
}

.fb-vtop-input::placeholder {
  color: #8d949e !important;
  font-size: 12.5px !important;
  opacity: 1 !important;
}

.fb-vtop-input:focus {
  border-color: #1877f2 !important;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2) !important;
}

body.night-mode .fb-vtop-input {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
  box-shadow: none !important;
}

body.night-mode .fb-vtop-input::placeholder {
  color: #b0b3b8 !important;
}

body.night-mode .fb-vtop-input:focus {
  border-color: #2d88ff !important;
  box-shadow: 0 0 0 2px rgba(45, 136, 255, 0.3) !important;
}

/* Log In button (bright royal blue matching facebook screenshot) */
.fb-vtop-btn-login {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 16px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  background-color: #1877f2 !important;
  border: 1px solid #1877f2 !important;
  border-radius: 5px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12) !important;
  transition: background-color 0.15s ease, transform 0.1s ease !important;
}

.fb-vtop-btn-login:hover {
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
  color: #ffffff !important;
}

.fb-vtop-btn-login:active {
  transform: scale(0.97) !important;
  background-color: #1464cc !important;
}

/* Forgot Account? link (clean facebook classic blue) */
.fb-vtop-forgot-link {
  font-size: 13px !important;
  color: #1877f2 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  padding: 0 4px !important;
  font-weight: 500 !important;
  transition: color 0.15s ease, text-decoration 0.15s ease !important;
}

.fb-vtop-forgot-link:hover {
  color: #0e5aae !important;
  text-decoration: underline !important;
}

body.night-mode .fb-vtop-forgot-link {
  color: #4599ff !important;
}

body.night-mode .fb-vtop-forgot-link:hover {
  color: #6fb0ff !important;
}

/* Day/Night icon button in visitor header */
.fb-visitor-icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 50% !important;
  background-color: #e4e6eb !important;
  color: #050505 !important;
  border: none !important;
  padding: 0 !important;
  margin-inline-start: 4px !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  text-decoration: none !important;
}

.fb-visitor-icon-btn:hover {
  background-color: #d8dadf !important;
  transform: scale(1.05) !important;
}

.fb-visitor-icon-btn svg,
.fb-visitor-icon-btn .header-icon {
  fill: currentColor !important;
  color: currentColor !important;
}

body.night-mode .fb-visitor-icon-btn {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-visitor-icon-btn:hover {
  background-color: #4e4f50 !important;
}

/* Mobile buttons layout */
.fb-visitor-actions-mobile {
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
}

.fb-visitor-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  line-height: 1 !important;
  transition: all 0.2s ease !important;
}

.fb-visitor-btn-login {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

.fb-visitor-btn-login:hover {
  background-color: #166fe5 !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.fb-visitor-btn-signup {
  background-color: #e4e6eb !important;
  color: #050505 !important;
}

.fb-visitor-btn-signup:hover {
  background-color: #d8dadf !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .fb-visitor-btn-signup {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-visitor-btn-signup:hover {
  background-color: #4e4f50 !important;
}

/* Responsive adjustments for visitor header */
@media (max-width: 860px) {
  .fb-visitor-toplogin-form {
    gap: 8px !important;
  }

  .fb-vtop-input {
    width: 135px !important;
  }
}

@media (max-width: 767.98px) {
  .fb-visitor-toplogin-form {
    display: none !important;
  }

  .fb-visitor-actions-mobile {
    display: flex !important;
  }
}

/* mobile second row: tabs */
.fb-mnav {
  display: flex;
  align-items: stretch;
  height: 52px;
  min-height: 52px;
  border-top: 1px solid #e4e6eb;
}

body.night-mode .fb-mnav {
  border-color: var(--fb-dark-divider);
}

.fb-mnav a {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fb-muted);
  border-bottom: 3px solid transparent;
}

.fb-mnav a svg {
  width: 24px;
  height: 24px;
}

.fb-mnav a:hover {
  background: var(--fb-hover);
}

body.night-mode .fb-mnav a:hover {
  background: var(--fb-dark-hover);
}

.fb-mnav a.active {
  color: var(--fb-blue);
  border-bottom-color: var(--fb-blue);
}

/* ------------------------------------------------------------
   2. FEED SHELL - 3 column layout
   ------------------------------------------------------------ */

.fb-shell {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 8px 12px 20px !important;
  gap: 0;
}

/* Ensure body and wrappers don't reserve artificial padding on either edge */
@media (min-width: 1200px) {

  .main-wrapper,
  body.logged-in .main-wrapper,
  .top-bar,
  .main-header {
    padding-right: 0 !important;
    padding-left: 0 !important;
  }

  .chat-sidebar {
    display: none !important;
  }
}

.fb-sidebar {
  display: none;
}

.fb-main {
  flex: 0 1 590px;
  width: 100%;
  min-width: 0;
  max-width: 590px;
  margin: 0 auto;
}

@media (max-width: 767.98px) {

  /* keep the mobile drawer (Sngine offcanvas) alive */
  .fb-left {
    display: block;
  }
}

@media (min-width: 992px) {
  .fb-shell {
    display: flex !important;
    justify-content: space-between !important;
    padding: 0 !important;
    gap: 0 !important;
    max-width: 100% !important;
  }

  .fb-left,
  .fb-right {
    display: block !important;
    position: sticky !important;
    top: 56px !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    scrollbar-width: thin !important;
  }

  .fb-left {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    padding: 16px 8px 16px 16px !important;
  }

  html[dir="rtl"] .fb-left {
    padding: 16px 16px 16px 8px !important;
  }

  .fb-right {
    display: none !important;
  }

  .fb-main {
    flex: 0 1 590px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 590px !important;
    margin: 16px auto !important;
    padding: 0 !important;
  }
}

@media (min-width: 1200px) {
  .fb-left {
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 300px !important;
    padding: 16px 8px 16px 16px !important;
  }

  html[dir="rtl"] .fb-left {
    padding: 16px 16px 16px 8px !important;
  }

  .fb-right {
    display: block !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 320px !important;
    padding: 16px 16px 16px 8px !important;
  }

  html[dir="rtl"] .fb-right {
    padding: 16px 8px 16px 16px !important;
  }

  .fb-main {
    flex: 0 1 590px !important;
    width: 100% !important;
    max-width: 590px !important;
    margin: 16px auto !important;
    padding: 0 !important;
  }
}

@media (min-width: 1400px) {
  .fb-left {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 320px !important;
  }

  .fb-right {
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 340px !important;
  }

  .fb-main {
    flex: 0 1 590px !important;
    width: 100% !important;
    max-width: 590px !important;
    margin: 16px auto !important;
    padding: 0 !important;
  }
}

/* FB card look inside the shell */
.fb-shell .card,
.fb-shell .post {
  border-radius: 8px;
  border: 1px solid var(--fb-card-border);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

body.night-mode .fb-shell .card,
body.night-mode .fb-shell .post {
  background: var(--fb-dark-card);
  border-color: var(--fb-dark-divider);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.fb-shell .card-header {
  border-radius: 8px 8px 0 0 !important;
}

body.night-mode .fb-shell .card-header {
  background: var(--fb-dark-card);
  color: var(--fb-dark-text);
}

.fb-shell .card-body {
  color: inherit;
}

/* section titles inside feed */
.fb-shell .card-header strong,
.fb-shell .card-header .title {
  color: #65676b;
  font-size: 15px;
}

body.night-mode .fb-shell .card-header strong,
body.night-mode .fb-shell .card-header .title {
  color: var(--fb-dark-muted);
}

/* ------------------------------------------------------------
   3. LEFT SIDEBAR (kimenu) + RIGHT SIDEBAR (widgets)
   ------------------------------------------------------------ */

.fb-leftnav {
  padding: 4px 0;
}

.fb-navtitle {
  padding: 12px 12px 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fb-muted);
}

body.night-mode .fb-navtitle {
  color: var(--fb-dark-muted);
}

.fb-navlink {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  margin: 2px 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fb-text);
  transition: background 0.15s ease;
}

body.night-mode .fb-navlink {
  color: var(--fb-dark-text);
}

.fb-navlink:hover {
  background: var(--fb-hover);
  text-decoration: none;
}

body.night-mode .fb-navlink:hover {
  background: var(--fb-dark-hover);
}

.fb-navlink.active {
  font-weight: 700;
  background: #e7f3ff;
  color: var(--fb-blue);
}

body.night-mode .fb-navlink.active {
  background: rgba(8, 102, 255, 0.15);
  color: #4599ff;
}

.fb-navlink .fb-navicon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
}

.fb-navlink .fb-navicon svg {
  width: 26px;
  height: 26px;
}

.fb-navlink .fb-navlabel {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-navlink .fb-navarrow {
  margin-inline-start: auto;
  color: var(--fb-muted);
  font-size: 12px;
}

body.night-mode .fb-navlink .fb-navarrow {
  color: var(--fb-dark-muted);
}

.fb-navlink.fb-profile {
  font-weight: 700;
}

.fb-navlink.fb-profile .fb-navicon {
  border-radius: 50%;
  overflow: hidden;
}

.fb-navlink.fb-profile .fb-navicon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Facebook-style See more / See less circular icon toggle */
.fb-more-toggle {
  cursor: pointer !important;
  user-select: none !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  min-height: 44px;
  transition: background-color 0.15s ease !important;
}

.fb-more-toggle .fb-more-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 50% !important;
  background-color: #e4e6eb !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background-color 0.2s cubic-bezier(0.2, 0, 0, 1), transform 0.2s ease !important;
}

.fb-more-toggle .fb-more-icon .fb-more-arrow {
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
  width: 20px !important;
  height: 20px !important;
  color: #050505 !important;
}

.fb-more-toggle .fb-navlabel {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: var(--fb-text) !important;
}

.fb-more-toggle .fb-more-label-less {
  display: none !important;
}

.fb-more-toggle[aria-expanded="true"] .fb-more-label-more {
  display: none !important;
}

.fb-more-toggle[aria-expanded="true"] .fb-more-label-less {
  display: block !important;
}

.fb-more-toggle[aria-expanded="true"] .fb-more-arrow {
  transform: rotate(180deg) !important;
}

.fb-more-toggle:hover .fb-more-icon {
  background-color: #d8dadf !important;
}

body.night-mode .fb-more-toggle .fb-navlabel {
  color: var(--fb-dark-text) !important;
}

body.night-mode .fb-more-toggle .fb-more-icon {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-more-toggle .fb-more-icon .fb-more-arrow {
  color: #e4e6eb !important;
}

body.night-mode .fb-more-toggle:hover .fb-more-icon {
  background-color: #4e4f50 !important;
}

.fb-navsub {
  padding: 4px 0 2px;
  margin-top: 2px;
  border-top: 1px solid var(--fb-card-border);
}

body.night-mode .fb-navsub {
  border-color: var(--fb-dark-divider);
}

/* right sidebar cards - Facebook seamless right rail */
.fb-right .card {
  background: transparent !important;
  border-radius: 8px;
  box-shadow: none !important;
  border: none !important;
  margin-bottom: 16px;
}

body.night-mode .fb-right .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.fb-right .card-header {
  background: transparent !important;
  border-bottom: none !important;
  padding: 8px 12px 4px;
  font-weight: 600;
  font-size: 16px;
  color: var(--fb-muted);
}

body.night-mode .fb-right .card-header {
  background: transparent !important;
  color: var(--fb-dark-muted);
}

.fb-right .card-body.with-list {
  padding: 2px 4px;
}

/* contacts card (Facebook signature right rail) */
.fb-right .fb-contacts {
  overflow: hidden;
}

.fb-contacts-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px 6px;
  border-bottom: 0 none;
}

.fb-contacts-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.2;
  color: var(--fb-text);
}

body.night-mode .fb-contacts-title {
  color: var(--fb-dark-text);
}

.fb-contacts-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.fb-contacts-actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--fb-muted);
}

.fb-contacts-actions a .svg-container {
  display: flex;
  line-height: 0;
}

.fb-contacts-actions a:hover {
  background: var(--fb-hover);
}

body.night-mode .fb-contacts-actions a {
  color: var(--fb-dark-muted);
}

body.night-mode .fb-contacts-actions a:hover {
  background: var(--fb-dark-hover);
}

.fb-contacts .card-body.with-list {
  padding: 2px 8px 8px;
  overflow-y: auto;
  height: auto !important;
  max-height: none !important;
}

.fb-contacts .card-body.with-list ul {
  margin: 0;
  padding: 0;
}

.fb-contact {
  list-style: none;
}

.fb-contact>a {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 8px;
  margin: 0;
  border-radius: 6px;
  color: var(--fb-text);
  text-decoration: none;
  overflow: hidden;
}

.fb-contact>a:hover {
  background: var(--fb-hover);
  text-decoration: none;
}

body.night-mode .fb-contact>a {
  color: var(--fb-dark-text);
}

body.night-mode .fb-contact>a:hover {
  background: var(--fb-dark-hover);
}

.fb-contact-avatar {
  position: relative;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
}

.fb-contact-avatar img {
  width: 28px;
  height: 28px;
  min-width: 28px;
  min-height: 28px;
  max-width: 28px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
}

.fb-contact-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------
   8. RIGHT RAIL - tighten the pre-built Sngine widgets
      (contacts, suggestions, promoted, merits, blogs, ads)
   ------------------------------------------------------------ */

/* keep the whole rail from overflowing */
.fb-right {
  overflow-x: hidden;
}

.fb-right .card {
  overflow: hidden;
}

/* suggestion/user rows: prevent avatar/button overlap in a 280px rail */
.fb-right .card-body.with-list .feeds-item {
  border-bottom: 1px solid #e4e6eb;
}

.fb-right .card-body.with-list .feeds-item:last-child {
  border-bottom: 0 none;
}

body.night-mode .fb-right .card-body.with-list .feeds-item {
  border-color: var(--fb-dark-divider);
}

.fb-right .data-container {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 0;
  padding: 6px 8px;
}

.fb-right .data-avatar {
  float: none;
  flex: 0 0 36px;
  width: 36px;
  height: 36px;
}

.fb-right .data-avatar img {
  width: 36px;
  height: 36px;
  min-width: 36px;
  min-height: 36px;
  object-fit: cover;
}

.fb-right .data-content {
  flex: 1 1 auto;
  min-width: 0;
  padding-left: 0;
  font-size: 13px;
}

.fb-right .data-content .float-end {
  position: static;
  float: none;
  margin-inline-start: 6px;
  flex: 0 0 auto;
}

.fb-right .data-content .float-end .btn {
  padding: 2px 8px;
  font-size: 11px;
}

.fb-right .data-content .name a,
.fb-right .data-content .name span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  vertical-align: middle;
}

.fb-right .data-content .verified-badge svg,
.fb-right .data-content .pro-badge svg {
  width: 16px;
  height: 16px;
}

/* suggested friends / people row name */
.fb-right .data-container .data-content .mt5 {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* promoted users grid - fit into the narrow rail */
.fb-right .pro-box-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.fb-right .pro-box-wrapper .user-box {
  float: none;
  width: 64px;
  margin: 0;
  opacity: 1;
}

.fb-right .pro-box-wrapper .user-box img {
  width: 54px;
  height: 54px;
  display: block;
  margin: 0 auto;
}

.fb-right .pro-box-wrapper .user-box .name {
  font-size: 10px;
}

/* merits balance card */
.fb-right .card-body.text-center .badge {
  font-size: 13px;
}

/* merits "top users" mini category image */
.fb-right .data-content .float-end img {
  width: 22px;
  height: 22px;
}

/* invitation widget icon */
.fb-right .card-body.text-center .svg-container.main-icon {
  display: block;
  margin: 0 auto;
}

.fb-right .card-body.text-center .svg-container.main-icon svg {
  width: 48px;
  height: 48px;
}

/* latest blogs carousel */
.fb-right .blogs-carousel .feeds-item .data-content {
  padding-left: 0;
}

/* ads & trending - cap inner images */
.fb-right .adblock img,
.fb-right .trending-card img,
.fb-right .card-body img {
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------
   4. PUBLISHER (Restored to default theme design)
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   5. POST CARDS
   ------------------------------------------------------------ */

.fb-shell ul,
.fb-shell li {
  list-style: none;
}

.fb-shell .post {
  background: #fff;
  overflow: hidden;
}

.fb-shell .post-body {
  padding-bottom: 0;
}

.fb-shell .post-header {
  padding: 12px 16px 0;
}

.fb-shell .post-stats {
  margin: 12px 16px 8px;
  padding: 0;
}

/* actions bar */
.fb-shell .post-actions {
  margin: 0 12px;
  padding: 4px 0;
  border-top: 1px solid #e4e6eb;
}

/* post-actions handled by default theme css */

/* ------------------------------------------------------------
   6. WIDGET CARDS INSIDE RIGHT RAIL
   ------------------------------------------------------------ */

.fb-sidebar .user-box-name,
.fb-sidebar .user-box .name {
  font-size: 14px;
  font-weight: 600;
}

/* ------------------------------------------------------------
   7. FOOTER BOTTOM BAR (mobile) - Facebook app style
   ------------------------------------------------------------ */

/* reserve space so the fixed bar never covers content */
@media (max-width: 767.98px) {
  body.logged-in {
    padding-bottom: 56px;
  }
}

.footer-bottom-bar {
  height: 61px;
  background: #fff;
  border-top: 1px solid #e4e6eb;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.05);
  z-index: 999;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

body.night-mode .footer-bottom-bar {
  background: var(--fb-dark-card);
  border-color: var(--fb-dark-divider);
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
}

.footer-bottom-bar .container {
  height: 61px;
}

.footer-bottom-bar-links {
  display: flex;
  align-items: stretch;
  height: 61px;
  gap: 0;
}

.footer-bottom-bar-links>.link {
  flex: 1;
  text-align: center;
  height: 61px;
}

.footer-bottom-bar-links>.link>a,
.footer-bottom-bar-links .link .user-menu,
.footer-bottom-bar-links .link>a.dropdown {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 61px;
  margin: 0;
  padding: 0;
  border-radius: 0;
  color: var(--fb-muted);
}

.footer-bottom-bar-links>.link>a:hover {
  background-color: var(--fb-hover);
}

body.night-mode .footer-bottom-bar-links>.link>a:hover {
  background-color: var(--fb-dark-hover);
}

.footer-bottom-bar-links>.link>a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 0;
  background: var(--fb-blue);
  border-radius: 0 0 3px 3px;
}

.footer-bottom-bar-links>.link.active>a {
  color: var(--fb-blue);
  background-color: rgba(8, 102, 255, 0.05);
}

.footer-bottom-bar-links>.link.active>a::before {
  height: 3px;
}

.footer-bottom-bar-links>.link.active>a>.title {
  color: var(--fb-blue);
  font-weight: 700;
}

.footer-bottom-bar-links>.link>a>.title {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
  color: inherit;
}

.footer-bottom-bar-links .link>a>svg {
  width: 24px;
  height: 24px;
}

body.night-mode .footer-bottom-bar-links>.link>a {
  color: var(--fb-dark-muted);
}

body.night-mode .footer-bottom-bar-links>.link.active>a,
body.night-mode .footer-bottom-bar-links>.link.active>a>.title {
  color: var(--fb-blue);
}

.footer-bottom-bar-links .link .user-menu {
  width: 100%;
}

.footer-bottom-bar-links .link .user-menu>img {
  height: 26px;
  width: 26px;
  margin: 0;
  border-radius: 50%;
  border: 2px solid var(--fb-card-border);
}

body.night-mode .footer-bottom-bar-links .link .user-menu>img {
  border-color: var(--fb-dark-divider);
}

.footer-bottom-bar-links .user-menu.dropdown-toggle::after {
  display: none;
}

.footer-bottom-bar-links .link .user-menu .title {
  font-size: 10px;
  line-height: 1;
  font-weight: 500;
}

.footer-bottom-bar-links .dropdown-widget {
  box-shadow: none;
  border-radius: 8px 8px 0 0;
  max-height: 60vh;
  overflow-y: auto;
}

/* ==========================================================================
   Section 9: Auth & Landing (Ollo-style split screen)
   ========================================================================== */
body.auth-page,
body.auth-page .main-wrapper,
body.auth-page .auth-wrapper {
  height: 100dvh;
  overflow: hidden;
}

body.auth-page {
  background: var(--fb-bg);
}

.auth-shell {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
}

@media (min-width: 992px) {
  .auth-shell {
    flex-direction: row;
  }
}

/* --- Left: dark hero panel --- */
.auth-hero {
  display: none;
  position: relative;
  flex: 1 1 50%;
  min-height: 0;
  overflow: hidden;
  background: #09090b;
  color: #fafafa;
}

@media (min-width: 992px) {
  .auth-hero {
    display: flex;
    flex-direction: column;
    padding: 48px 64px 64px;
  }
}

@media (min-width: 1280px) {
  .auth-hero {
    padding: 64px 96px 96px;
  }
}

.auth-hero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #18181b 0%, #09090b 60%, #09090b 100%);
}

.auth-hero-grid {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  background-image:
    linear-gradient(to right, #ffffff 1px, transparent 1px),
    linear-gradient(to bottom, #ffffff 1px, transparent 1px);
  background-size: 48px 48px;
}

.auth-hero-rings {
  position: absolute;
  bottom: -140px;
  right: -140px;
  width: 560px;
  height: 560px;
  opacity: 0.4;
  pointer-events: none;
}

.auth-hero-rings .ring-1 {
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 50%;
}

.auth-hero-rings .ring-2 {
  position: absolute;
  inset: 90px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 50%;
}

.auth-hero-rings .ring-3 {
  position: absolute;
  inset: 190px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 120px rgba(255, 255, 255, 0.05);
}

.auth-hero-top {
  position: relative;
  z-index: 2;
  margin-bottom: auto;
  display: flex;
  align-items: center;
  gap: 2px;
}

.auth-hero-brand {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #fff;
}

.auth-hero-body {
  position: relative;
  z-index: 2;
  max-width: 460px;
}

.auth-hero-title {
  margin: 0 0 20px;
  color: #fff;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.02em;
}

@media (min-width: 1280px) {
  .auth-hero-title {
    font-size: 48px;
  }
}

.auth-hero-desc {
  margin: 0;
  max-width: 34ch;
  color: #a1a1aa;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

/* --- Right: centered form panel --- */
.auth-form-side {
  flex: 1 1 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  background: var(--fb-bg);
  overflow-y: auto;
}

body.night-mode .auth-form-side {
  background: var(--fb-dark-bg);
}

.auth-form-box {
  width: 100%;
  max-width: 384px;
}

.auth-brand-mobile {
  display: block;
  margin-bottom: 24px;
  text-align: center;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--fb-primary);
}

@media (min-width: 992px) {
  .auth-brand-mobile {
    display: none;
  }
}

.auth-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--fb-text);
}

body.night-mode .auth-title {
  color: var(--fb-dark-text);
}

.auth-subtitle {
  margin: 0 0 24px;
  font-size: 14px;
  color: var(--fb-muted);
}

body.night-mode .auth-subtitle {
  color: var(--fb-dark-muted);
}

/* form fields (Ollo style) */
.auth-field {
  margin-bottom: 16px;
}

.auth-label {
  display: block;
  margin: 0 0 6px;
  font-size: 11px;
  font-weight: 600;
  color: var(--fb-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

body.night-mode .auth-label {
  color: var(--fb-dark-muted);
}

.auth-input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 14px;
  color: var(--fb-text);
  background: transparent;
  border: 1px solid var(--fb-divider);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.auth-input::placeholder {
  color: var(--fb-muted);
  opacity: 0.55;
}

.auth-input:focus {
  border-color: var(--fb-primary);
  box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.15);
}

body.night-mode .auth-input {
  color: var(--fb-dark-text);
  border-color: var(--fb-dark-divider);
  background: var(--fb-dark-hover);
}

body.night-mode .auth-input::placeholder {
  color: var(--fb-dark-muted);
}

body.night-mode .auth-input:focus {
  border-color: var(--fb-primary);
  box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.25);
}

/* label row (password: forgot link) */
.auth-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.auth-label-row .auth-label {
  margin-bottom: 6px;
}

.auth-forgot {
  font-size: 12px;
  font-weight: 500;
  color: var(--fb-muted);
  text-decoration: none;
}

.auth-forgot:hover {
  color: var(--fb-primary);
  text-decoration: underline;
}

body.night-mode .auth-forgot {
  color: var(--fb-dark-muted);
}

.auth-btn {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: 0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--fb-primary);
  transition: background 0.15s ease, transform 0.08s ease;
}

.auth-btn:hover {
  background: #0457d6;
}

.auth-btn:active {
  transform: scale(0.985);
}

body.night-mode .auth-btn {
  background: var(--fb-primary);
}

/* divider + social (Ollo "Or") */
.auth-or {
  position: relative;
  margin: 24px 0;
  text-align: center;
}

.auth-or::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--fb-divider);
}

body.night-mode .auth-or::before {
  background: var(--fb-dark-divider);
}

.auth-or span {
  position: relative;
  padding: 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fb-muted);
  background: var(--fb-bg);
}

body.night-mode .auth-or span {
  color: var(--fb-dark-muted);
  background: var(--fb-dark-bg);
}

.auth-social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin-bottom: 12px;
  font-size: 14px;
  font-weight: 500;
  color: var(--fb-text);
  background: transparent;
  border: 1px solid var(--fb-divider);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.auth-social:hover {
  background: var(--fb-hover);
  color: var(--fb-text);
  text-decoration: none;
}

body.night-mode .auth-social {
  color: var(--fb-dark-text);
  border-color: var(--fb-dark-divider);
}

body.night-mode .auth-social:hover {
  background: var(--fb-dark-hover);
  color: var(--fb-dark-text);
}

.auth-switch {
  margin-top: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--fb-muted);
}

body.night-mode .auth-switch {
  color: var(--fb-dark-muted);
}

.auth-switch a {
  font-weight: 600;
  color: var(--fb-text);
  text-decoration: none;
}

.auth-switch a:hover {
  text-decoration: underline;
}

body.night-mode .auth-switch a {
  color: var(--fb-dark-text);
}

.auth-switch button {
  border: 0;
  padding: 0;
  background: none;
  font-weight: 600;
  color: var(--fb-text);
}

body.night-mode .auth-switch button {
  color: var(--fb-dark-text);
}

/* error / highlight alerts inside auth */
.auth-box .alert-danger,
.auth-box .alert-warning {
  margin-top: 8px;
  margin-bottom: 0;
  border-radius: 8px;
  font-size: 13px;
}

/* footer links inside auth form side (Ollo uppercase tiny) */
.auth-footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px 28px;
  width: 100%;
  max-width: 384px;
  margin-top: 32px;
  padding: 0 8px;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fb-muted);
}

.auth-footer-links a {
  color: var(--fb-muted);
  text-decoration: none;
}

.auth-footer-links a:hover {
  color: var(--fb-text);
}

body.night-mode .auth-footer-links a:hover {
  color: var(--fb-dark-text);
}

/* fixed overflow for landing when auth shell used */
html.auth-full,
html.auth-full body {
  height: 100%;
}

/* ==========================================================================
   Section 9b: Auth content pages (static / contact / support)
   ========================================================================== */
.auth-content-card {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 28px;
  background: #fff;
  border: 1px solid var(--fb-divider);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

body.night-mode .auth-content-card {
  background: var(--fb-dark-card);
  border-color: var(--fb-dark-divider);
}

.auth-content-card h1,
.auth-content-card h2,
.auth-content-card h3 {
  color: var(--fb-text);
  font-weight: 600;
  letter-spacing: -0.01em;
}

body.night-mode .auth-content-card h1,
body.night-mode .auth-content-card h2,
body.night-mode .auth-content-card h3 {
  color: var(--fb-dark-text);
}

.auth-content-card p,
.auth-content-card li {
  color: #65676b;
  font-size: 15px;
  line-height: 1.7;
}

body.night-mode .auth-content-card p,
body.night-mode .auth-content-card li {
  color: var(--fb-dark-muted);
}

.auth-content-card a {
  color: var(--fb-primary);
}

.auth-content-card .static-page-content {
  color: #65676b;
  font-size: 15px;
  line-height: 1.7;
}

body.night-mode .auth-content-card .static-page-content {
  color: var(--fb-dark-muted);
}

.auth-content-card .static-page-content h1,
.auth-content-card .static-page-content h2,
.auth-content-card .static-page-content h3,
.auth-content-card .static-page-content h4 {
  margin-top: 18px;
  color: var(--fb-text);
}

body.night-mode .auth-content-card .static-page-content h1,
body.night-mode .auth-content-card .static-page-content h2,
body.night-mode .auth-content-card .static-page-content h3,
body.night-mode .auth-content-card .static-page-content h4 {
  color: var(--fb-dark-text);
}

.auth-content-card .static-page-content img {
  max-width: 100%;
}

.auth-content-title {
  margin: 0 0 4px;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--fb-text);
}

body.night-mode .auth-content-title {
  color: var(--fb-dark-text);
}

.auth-content-subtitle {
  margin: 0 0 20px;
  font-size: 14px;
  color: var(--fb-muted);
}

body.night-mode .auth-content-subtitle {
  color: var(--fb-dark-muted);
}

.auth-content-card .form-label {
  color: var(--fb-text);
  font-weight: 500;
}

body.night-mode .auth-content-card .form-label {
  color: var(--fb-dark-text);
}

.auth-content-card .form-control {
  height: 44px;
  border-radius: 8px;
  border-color: var(--fb-divider);
}

textarea.form-control {
  height: auto;
}

.auth-content-card .btn-primary {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
  background: var(--fb-primary);
  border-color: var(--fb-primary);
}

.auth-content-card .btn-primary:hover {
  background: #0457d6;
  border-color: #0457d6;
}

body.night-mode .auth-content-card .form-control {
  background: var(--fb-dark-hover);
  border-color: var(--fb-dark-divider);
  color: var(--fb-dark-text);
}

/* support tickets table inside content card */
.auth-content-card .table {
  color: var(--fb-text);
}

body.night-mode .auth-content-card .table {
  color: var(--fb-dark-text);
  --bs-table-bg: transparent;
}

/* ============================================================
   10. DESIGN TOKENS (src design system — Apple HIG)
   Light + Dark mode CSS custom properties + shared component classes
   ============================================================ */

/* ---------- 10.1 Light-mode tokens (default) ---------- */
:root {
  --ds-surface-base: #f5f5f7;
  --ds-surface-el: #ffffff;
  --ds-surface-sec: #f0f0f2;
  --ds-text-primary: #1d1d1f;
  --ds-text-secondary: #7a7a7a;
  --ds-text-tertiary: #86868b;
  --ds-primary: #0066cc;
  --ds-primary-hover: #0071e3;
  --ds-accent: #0071e3;
  --ds-border: #d2d2d7;
  --ds-muted: #e5e5ea;
  --ds-danger: #ff3b30;
  --ds-success: #34c759;
  --ds-radius-sm: 8px;
  --ds-radius-md: 11px;
  --ds-radius-lg: 18px;
  --ds-radius-full: 9999px;
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(0, 0, 0, 0.02);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
  --ds-font-sans: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --ds-font-arabic: 'IBM Plex Sans Arabic', 'Segoe UI', system-ui, sans-serif;
  --ds-transition: 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- 10.2 Dark-mode tokens ---------- */
body.night-mode {
  --ds-surface-base: #0a0a0a;
  --ds-surface-el: #1c1c1e;
  --ds-surface-sec: #2c2c2e;
  --ds-text-primary: #ffffff;
  --ds-text-secondary: #ebebf5;
  --ds-text-tertiary: #98989d;
  --ds-primary: #2997ff;
  --ds-primary-hover: #0a84ff;
  --ds-accent: #0a84ff;
  --ds-border: #38383a;
  --ds-muted: #2c2c2e;
  --ds-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --ds-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ---------- 10.3 Global reset to tokens ---------- */
.ds-shell {
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  background: var(--ds-surface-base);
  color: var(--ds-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.ds-shell *,
.ds-shell *::before,
.ds-shell *::after {
  box-sizing: border-box;
}

.ds-shell a {
  color: var(--ds-primary);
  text-decoration: none;
}

.ds-shell a:hover {
  color: var(--ds-primary-hover);
}

.ds-shell img {
  max-width: 100%;
  display: block;
}

/* ---------- 10.4 Shared component classes ---------- */

/* Card */
.ds-card {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  padding: 1rem;
  transition: box-shadow var(--ds-transition), border-color var(--ds-transition);
}

.ds-card:hover {
  box-shadow: var(--ds-shadow-md);
}

.ds-card-body {
  padding: 0.75rem 0;
}

.ds-card-header {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--ds-border);
  margin-bottom: 0.75rem;
}

.ds-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--ds-text-primary);
  margin: 0;
}

.ds-card-subtitle {
  font-size: 0.8125rem;
  color: var(--ds-text-secondary);
  margin-top: 0.125rem;
}

.ds-card-grid {
  list-style: none;
  padding: 0;
  margin: 0 -8px;
}

.ds-card-grid>[class*="col-"] {
  padding: 8px;
}

/* Avatar */
.ds-avatar {
  border-radius: var(--ds-radius-full);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--ds-muted);
  display: inline-block;
}

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

.ds-avatar.xs {
  width: 24px;
  height: 24px;
}

.ds-avatar.sm {
  width: 32px;
  height: 32px;
}

.ds-avatar.md {
  width: 40px;
  height: 40px;
}

.ds-avatar.lg {
  width: 56px;
  height: 56px;
}

.ds-avatar.xl {
  width: 80px;
  height: 80px;
}

.ds-avatar.rounded-xl {
  border-radius: var(--ds-radius-md);
}

/* Button */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-weight: 600;
  font-size: 0.875rem;
  padding: 10px 20px;
  border-radius: var(--ds-radius-full);
  border: none;
  cursor: pointer;
  transition: all var(--ds-transition);
  line-height: 1.4;
  min-height: 44px;
}

.ds-btn:active {
  transform: scale(0.97);
}

.ds-btn.primary {
  background: var(--ds-primary);
  color: #fff;
}

.ds-btn.primary:hover {
  background: var(--ds-primary-hover);
  color: #fff;
}

.ds-btn.secondary {
  background: transparent;
  color: var(--ds-primary);
  border: 1px solid var(--ds-border);
}

.ds-btn.secondary:hover {
  background: var(--ds-surface-sec);
}

.ds-btn.ghost {
  background: transparent;
  color: var(--ds-text-primary);
}

.ds-btn.ghost:hover {
  background: var(--ds-surface-sec);
}

.ds-btn.sm {
  font-size: 0.8125rem;
  padding: 7px 14px;
  min-height: 36px;
}

.ds-btn.lg {
  font-size: 1rem;
  padding: 12px 24px;
  min-height: 48px;
}

.ds-btn.full {
  width: 100%;
}

.ds-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Icon button */
.ds-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--ds-radius-full);
  border: none;
  background: transparent;
  color: var(--ds-text-primary);
  cursor: pointer;
  transition: background var(--ds-transition);
}

.ds-icon-btn:hover {
  background: var(--ds-surface-sec);
}

/* Text utilities */
.ds-text-primary {
  color: var(--ds-text-primary);
}

.ds-text-secondary {
  color: var(--ds-text-secondary);
}

.ds-text-tertiary {
  color: var(--ds-text-tertiary);
}

.ds-text-center {
  text-align: center;
}

.ds-text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ds-font-bold {
  font-weight: 700;
}

.ds-font-semibold {
  font-weight: 600;
}

.ds-text-sm {
  font-size: 0.875rem;
}

.ds-text-xs {
  font-size: 0.8125rem;
}

.ds-text-lg {
  font-size: 1.125rem;
}

.ds-leading-tight {
  line-height: 1.3;
}

.ds-tracking-tight {
  letter-spacing: -0.02em;
}

/* Grid helpers */
.ds-grid {
  display: grid;
  gap: 1rem;
}

.ds-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.ds-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.ds-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

.ds-grid-2-3-4 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 576px) {
  .ds-grid-2-3-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 768px) {
  .ds-grid-2-3-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .ds-grid-2-3-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.ds-grid-2.md-3 {
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
  .ds-grid-2.md-3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .ds-grid-2.md-3 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Flex helpers */
.ds-flex {
  display: flex;
}

.ds-flex-col {
  flex-direction: column;
}

.ds-items-center {
  align-items: center;
}

.ds-justify-between {
  justify-content: space-between;
}

.ds-gap-1 {
  gap: 4px;
}

.ds-gap-2 {
  gap: 8px;
}

.ds-gap-3 {
  gap: 12px;
}

.ds-gap-4 {
  gap: 16px;
}

.ds-flex-1 {
  flex: 1;
  min-width: 0;
}

.ds-shrink-0 {
  flex-shrink: 0;
}

.ds-wrap {
  flex-wrap: wrap;
}

/* Layout */
.ds-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ds-container-sm {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

.ds-py-8 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* Divider */
.ds-divider {
  height: 1px;
  background: var(--ds-border);
  margin: 1rem 0;
}

/* Tag / chip */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-sec);
  color: var(--ds-text-secondary);
}

.ds-tag.primary {
  background: rgba(0, 102, 204, 0.1);
  color: var(--ds-primary);
}

/* Navbar pills */
.ds-nav-pills {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-nav-pill {
  padding: 10px 16px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--ds-transition);
  min-height: 44px;
}

.ds-nav-pill:hover {
  color: var(--ds-text-primary);
}

.ds-nav-pill.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
}

/* List item */
.ds-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--ds-radius-md);
  cursor: pointer;
  transition: background var(--ds-transition);
}

.ds-list-item:hover {
  background: var(--ds-surface-sec);
}

/* Spinner */
.ds-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid var(--ds-muted);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin 0.7s linear infinite;
}

@keyframes ds-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- 10.5 Overlay navbar (dark glass) ---------- */
.ds-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 52px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ds-border);
}

body.night-mode .ds-navbar {
  background: rgba(26, 26, 26, 0.82);
}

.ds-navbar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ---------- 10.6 Sidebar ---------- */
.ds-sidebar {
  position: fixed;
  top: 52px;
  left: 0;
  bottom: 0;
  width: 256px;
  background: var(--ds-surface-el);
  border-right: 1px solid var(--ds-border);
  overflow-y: auto;
  z-index: 40;
  padding: 1rem 0;
}

@media (max-width: 991px) {
  .ds-sidebar {
    display: none;
  }
}

.ds-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-sidebar-nav li {
  margin: 0;
}

.ds-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 16px;
  font-size: 0.9375rem;
  color: var(--ds-text-primary);
  text-decoration: none;
  transition: background var(--ds-transition);
  cursor: pointer;
  min-height: 44px;
}

.ds-sidebar-link:hover {
  background: var(--ds-surface-sec);
}

.ds-sidebar-link.active {
  background: var(--ds-surface-sec);
  font-weight: 600;
}

.ds-sidebar-heading {
  padding: 12px 16px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-tertiary);
}

/* ---------- 10.7 Main content area ---------- */
.ds-main {
  margin-left: 256px;
  min-height: calc(100vh - 52px);
  padding: 1.5rem 0;
}

@media (max-width: 991px) {
  .ds-main {
    margin-left: 0;
  }
}

.ds-main-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Post body */
.ds-post {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  overflow: hidden;
}

.ds-post-header {
  padding: 12px 16px 0;
}

.ds-post-body {
  padding: 12px 16px;
}

.ds-post-stats {
  padding: 8px 16px;
  font-size: 0.8125rem;
  color: var(--ds-text-secondary);
}

.ds-post-actions {
  padding: 4px 8px;
  border-top: 1px solid var(--ds-border);
  display: flex;
  justify-content: space-around;
}

.ds-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--ds-radius-md);
  border: none;
  background: transparent;
  color: var(--ds-text-secondary);
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--ds-transition);
  min-height: 44px;
}

.ds-action-btn:hover {
  background: var(--ds-surface-sec);
}

/* Section header */
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.ds-section-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ds-text-primary);
}

/* Section header inner */
.ds-section-header .float-end {
  margin-left: auto;
}

/* Page header (Ollo style) */
.ds-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 1.5rem 1rem 0.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.ds-page-header-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ds-page-header-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--ds-radius-lg);
  background: var(--ds-surface-sec);
  color: var(--ds-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ds-page-title {
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ds-text-primary);
  margin: 0;
}

.ds-page-subtitle {
  font-size: 0.9375rem;
  color: var(--ds-text-secondary);
  margin: 4px 0 0;
  max-width: 560px;
}

.ds-page-header .ds-page-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Layout: consistent two-column (sidebar + main)
   Sidebar is sticky and fixed-width; main takes remaining space. */
.ds-layout {
  display: flex;
  align-items: stretch;
  gap: 24px;
  position: relative;
}

.ds-layout>.ds-sidebar {
  position: sticky;
  top: 76px;
  width: 236px;
  flex: 0 0 236px;
  max-height: calc(100vh - 84px);
  overflow-y: auto;
  padding: 4px 0;
}

.ds-layout>.ds-main {
  flex: 1 1 auto;
  min-width: 0;
  margin-left: 0;
  min-height: calc(100vh - 52px);
  padding: 0.25rem 0 1.5rem;
}

.ds-layout .ds-sidebar .ds-card {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* Deprecated full-page sidebar/margin (kept for non-layout use) */
@media (max-width: 991px) {
  .ds-layout>.ds-sidebar {
    display: none;
  }

  .ds-layout>.ds-main {
    margin-left: 0;
  }
}

/* Sidebar nav block */
.ds-sidebar-nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ds-sidebar-group {
  margin-bottom: 20px;
}

.ds-sidebar-title {
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-tertiary);
  padding: 0 14px 8px;
  margin: 0;
}

.ds-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ds-text-primary);
  text-decoration: none;
  border-radius: var(--ds-radius-md);
  transition: background var(--ds-transition), color var(--ds-transition);
  min-height: 44px;
  margin-bottom: 2px;
}

.ds-sidebar-link i {
  width: 22px;
  text-align: center;
  color: var(--ds-text-secondary);
  font-size: 1.05rem;
}

.ds-sidebar-link:hover {
  background: var(--ds-surface-sec);
}

.ds-sidebar-link:hover i {
  color: var(--ds-primary);
}

.ds-sidebar-link.active {
  background: var(--ds-surface-sec);
  color: var(--ds-primary);
  font-weight: 700;
}

.ds-sidebar-link.active i {
  color: var(--ds-primary);
}

.ds-sidebar-link .ds-sidebar-caret {
  margin-left: auto;
  font-size: 0.75rem;
  color: var(--ds-text-tertiary);
}

.ds-sidebar-heading {
  padding: 12px 16px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ds-text-tertiary);
}

/* Search bar */
.ds-search-bar {
  padding: 0.25rem 0 1rem;
}

.ds-search-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 14px;
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-full);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}

body.night-mode .ds-search-inner {
  background: var(--ds-surface-el);
}

.ds-search-inner:focus-within {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(51, 102, 255, 0.12);
}

.ds-search-icon {
  color: var(--ds-text-tertiary);
  font-size: 0.875rem;
  flex: 0 0 auto;
}

.ds-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 40px;
  border: none;
  outline: none;
  box-shadow: none;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.9375rem;
  color: var(--ds-text-primary);
  background: transparent;
  padding: 0;
}

.ds-search-input::placeholder {
  color: var(--ds-text-tertiary);
}

.ds-search-input:focus {
  border: none;
  box-shadow: none;
  outline: none;
}

body.night-mode .ds-search-input {
  color: var(--ds-text-primary);
}

.ds-search-btn {
  flex: 0 0 auto;
  height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  border: none;
  border-radius: var(--ds-radius-full);
  background: var(--ds-primary);
  color: #fff;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ds-transition);
}

.ds-search-btn:hover {
  background: var(--ds-primary-hover);
}

body.night-mode .ds-search-btn {
  color: #000;
}

@media (max-width: 575.98px) {
  .ds-search-btn {
    padding: 0 14px;
  }

  .ds-search-btn span {
    display: none;
  }

  .ds-search-btn {
    gap: 0;
  }
}

/* Category filter bar (Watch / media): horizontal pill nav below main nav */
.ds-catbar {
  background: transparent;
  border-bottom: 1px solid var(--ds-border);
  margin: 0 -16px 16px;
  padding: 10px 16px;
}

/* sticky wrapper: keeps the Categories bar + search bar pinned on scroll
   (overflow fix on .ds-page.sg-offcanvas enables sticky; see below) */
.ds-watch-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 56px;
  z-index: 30;
  margin: 0 -16px 16px;
  padding: 0 16px;
  background: var(--ds-surface-base);
  border-bottom: 1px solid var(--ds-border);
}

.ds-watch-sticky .ds-catbar {
  margin-inline: 0;
  margin-bottom: 4px;
  padding-inline: 0;
  border-bottom: 0;
}

.ds-watch-sticky .ds-search-bar {
  padding-top: 4px;
  padding-bottom: 6px;
}

/* .sg-offcanvas (style.min.css) applies `overflow:hidden`, which disables
   sticky positioning inside it. Un-break sticky for our charts/sections page. */
.ds-page.sg-offcanvas {
  overflow: visible;
}

.ds-catbar-inner {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ds-border) transparent;
  scroll-behavior: smooth;
  cursor: grab;
}

.ds-catbar-inner.dragging {
  cursor: grabbing;
  user-select: none;
  scroll-behavior: auto;
}

.ds-cat-pill {
  flex: 0 0 auto;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  padding: 7px 16px;
  border-radius: var(--ds-radius-full);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ds-text-secondary);
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--ds-transition);
}

.ds-cat-pill:hover {
  background: var(--ds-surface-sec);
  color: var(--ds-text-primary);
}

.ds-cat-pill.active {
  background: var(--ds-primary);
  color: #fff;
  border-color: var(--ds-primary);
  font-weight: 700;
}

body.night-mode .ds-cat-pill.active {
  color: #000;
}

.ds-cat-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.ds-count {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--ds-radius-full);
  background: var(--ds-primary);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

body.night-mode .ds-count {
  color: #000;
}

.ds-count-warn {
  background: #f0ad4e;
}

.ds-catbar-action {
  margin-left: auto;
  flex: 0 0 auto;
}

.ds-catbar-static {
  position: static;
}

@media (max-width: 575.98px) {
  .ds-catbar-action span {
    display: none;
  }

  .ds-catbar-action.btn {
    padding: 6px 10px;
  }
}

/* Flush-left page layout: sidebar pinned to viewport left edge, content centered */
body.ds-no-chat .main-wrapper,
body.ds-no-chat .top-bar,
body.ds-no-chat .main-header {
  padding-right: 0;
}

.ds-page {
  display: flex !important;
  align-items: flex-start !important;
  width: 100% !important;
  min-height: calc(100vh - 56px);
}

.ds-page>.ds-left {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  box-shadow: none;
}

@media (min-width: 992px) {
  .ds-page>.ds-left {
    position: sticky !important;
    top: 56px !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    align-self: flex-start !important;
    max-height: calc(100vh - 56px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 12px 8px 24px !important;
    border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-left: none !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
  }

  .night-mode .ds-page>.ds-left {
    border-right-color: rgba(255, 255, 255, 0.08) !important;
  }

  [dir="rtl"] .ds-page>.ds-left {
    border-right: none !important;
    border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  body.night-mode[dir="rtl"] .ds-page>.ds-left,
  [dir="rtl"] body.night-mode .ds-page>.ds-left {
    border-left-color: rgba(255, 255, 255, 0.08) !important;
  }

  .ds-page-main {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding: 16px 24px !important;
  }

  .ds-page-main-inner {
    width: 100% !important;
    max-width: 1320px !important;
    min-width: 0 !important;
  }

  /* re-apply FB nav item styles that fb-sidebar/fb-left classes normally provide */
  .ds-page>.ds-left .fb-navlink {
    border-radius: 8px !important;
  }
}

@media (min-width: 1200px) {
  .ds-page>.ds-left {
    flex: 0 0 320px !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
  }
}

@media (min-width: 1400px) {
  .ds-page>.ds-left {
    flex: 0 0 360px !important;
    width: 360px !important;
    min-width: 360px !important;
    max-width: 360px !important;
  }
}

@media (max-width: 991.98px) {
  .ds-page>.ds-left {
    display: none !important;
  }

  .ds-page-main {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding: 12px !important;
  }
}

/* Watch video grid */
.ds-watch-grid {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 24px 20px !important;
  width: 100% !important;
}

@media (min-width: 576px) {
  .ds-watch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 992px) {
  .ds-watch-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

.ds-watch-cell {
  min-width: 0 !important;
  width: 100% !important;
  overflow: hidden !important;
}

.ds-watch-tile,
a.ds-watch-tile,
a.pg_video.ds-watch-tile {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  padding-bottom: 0 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #000000 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  text-decoration: none !important;
}

.ds-watch-thumb {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 8px !important;
}

.ds-watch-play {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
  pointer-events: none !important;
}

.ds-watch-tile:hover .ds-watch-play {
  background: rgba(24, 119, 242, 0.9) !important;
  transform: translate(-50%, -50%) scale(1.1) !important;
}

.ds-watch-meta {
  padding: 8px 2px 0 !important;
  width: 100% !important;
}

.ds-watch-title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .ds-watch-title {
  color: #e4e6eb !important;
}

.ds-watch-title:hover {
  color: #1877f2 !important;
}

.ds-watch-sub {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-top: 5px !important;
  font-size: 12px !important;
  color: #65676b !important;
}

body.night-mode .ds-watch-sub {
  color: #b0b3b8 !important;
}

.ds-watch-views i {
  margin-right: 4px !important;
}

.ds-watch-cat {
  background: #e4e6eb !important;
  border: none !important;
  color: #050505 !important;
  padding: 2px 8px !important;
  border-radius: 4px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
}

body.night-mode .ds-watch-cat {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.ds-watch-cat:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

/* Wide main column (media/content pages) */
.ds-main-wide {
  max-width: 1000px;
}

/* Feed content: unify feed cards with the elevated surface look */
.ds-feed .post {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  margin-bottom: 20px;
}

.ds-feed .post .post-body {
  padding: 14px 18px 0;
}

.ds-feed .panel-effect {
  border-radius: var(--ds-radius-lg);
}

/* ds-section-header within content area */
.ds-main .ds-section-header {
  padding: 0.75rem 0 0.25rem;
}

.ds-main .ds-section-title {
  font-size: 1.375rem;
}

/* ---------- 11. DESIGN POLISH: shared Sngine structural classes ----------
   Refines legacy structural components (tabs, filters, side-nav, cards)
   used by large profile/content templates (profile, page, group, event)
   into the Ollo surface look without touching template markup. */

/* content-tabs -> elevated pill tabs */
.sg-offcanvas .content-tabs,
.ds-container .content-tabs {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
  margin-bottom: 20px;
  padding: 4px 8px;
}

.sg-offcanvas .content-tabs>ul>li>a,
.ds-container .content-tabs>ul>li>a {
  color: var(--ds-text-secondary);
  border-radius: var(--ds-radius-md);
  margin: 2px 4px;
}

.sg-offcanvas .content-tabs>ul>li.active>a,
.ds-container .content-tabs>ul>li.active>a {
  color: var(--ds-primary);
  font-weight: 600;
  background: var(--ds-surface-sec);
  border-bottom: none;
}

@media (min-width: 768px) {

  .sg-offcanvas .content-tabs>ul>li>a,
  .ds-container .content-tabs>ul>li>a {
    padding: 10px 20px;
    font-size: 0.9375rem;
  }
}

/* posts-filter -> section title row */
.sg-offcanvas .posts-filter,
.ds-container .posts-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 1rem 0;
  margin-bottom: 16px;
  border-bottom-color: var(--ds-border);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ds-text-primary);
}

.sg-offcanvas .posts-filter>span:first-child,
.ds-container .posts-filter>span:first-child {
  font-size: 1.25rem;
}

.sg-offcanvas .posts-filter .countries-filter,
.ds-container .posts-filter .countries-filter {
  background: var(--ds-surface-sec);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* side-nav -> rounded link pills */
.sg-offcanvas .card .side-nav>li>a,
.ds-container .card .side-nav>li>a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin: 2px 6px;
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-primary);
  font-weight: 500;
  font-size: 0.9375rem;
}

.sg-offcanvas .card .side-nav>li.active>a,
.ds-container .card .side-nav>li.active>a {
  background: var(--ds-surface-sec);
  color: var(--ds-primary);
  font-weight: 600;
}

.sg-offcanvas .card .side-nav li i,
.ds-container .card .side-nav li i {
  color: var(--ds-text-tertiary);
}

/* plain cards in offcanvas (non-feed) -> ds-card surface */
.sg-offcanvas:not(.fb-shell) .card,
.ds-container:not(.fb-shell) .card {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-lg);
  box-shadow: var(--ds-shadow);
}

.sg-offcanvas:not(.fb-shell) .card .card-header,
.ds-container:not(.fb-shell) .card .card-header {
  background: transparent;
  border-bottom: 1px solid var(--ds-border);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ds-text-primary);
  padding: 16px 20px;
}

.sg-offcanvas:not(.fb-shell) .card .card-body,
.ds-container:not(.fb-shell) .card .card-body {
  padding: 20px;
}

/* legacy page-header hero (still referenced by some templates) */
.page-header {
  background: var(--ds-surface-base);
  border-bottom: 1px solid var(--ds-border);
}

.page-header h2 {
  color: var(--ds-text-primary);
}

.page-header p.text-xlg {
  color: var(--ds-text-secondary);
}

.page-header .form-control {
  border-radius: var(--ds-radius-lg) 0 0 var(--ds-radius-lg);
  border-color: var(--ds-border);
}

.page-header .input-group .btn {
  border-radius: 0 var(--ds-radius-lg) var(--ds-radius-lg) 0;
  border-color: var(--ds-border);
  color: var(--ds-text-primary);
}

/* ---------- 12. DESIGN POLISH: blogs & articles ---------- */
/* Refines the shared Sngine blog/listing cards and sidebar widgets
   into the Ollo surface look (CSS-only, no template edits). */

/* Blog sidebar widgets -> ds-card surfaces */
.blogs-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 18px;
  margin: 14px 0 8px;
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
}

.blogs-widget-title {
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--ds-text-primary);
}

.blogs-widget-header a {
  color: var(--ds-primary);
  font-size: 0.8125rem;
  font-weight: 600;
}

/* Blog listing cards (featured grid) */
.ds-container .blogs-wrapper .blog,
.ds-container .blog-wrapper {
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  overflow: hidden;
  box-shadow: var(--ds-shadow);
}

.ds-container .blog .blog-image {
  border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}

.ds-container .blog .blog-content {
  padding: 18px 20px;
}

.ds-container .blog .blog-content .text,
.ds-container .blog .blog-wrapper .text {
  color: var(--ds-text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.ds-container .blog .blog-more a,
.ds-container .blog-wrapper .blog-more a {
  font-weight: 600;
  color: var(--ds-primary);
}

/* Blog article card full view */
.ds-container .blog-wrapper .post-media-image-wrapper {
  border-radius: 0 0 var(--ds-radius-lg) var(--ds-radius-lg);
}

.ds-container .blog-wrapper .post-media-meta {
  padding: 20px 22px;
}

.ds-container .blog-wrapper .post-media-meta .title {
  color: var(--ds-text-primary);
  font-weight: 700;
  font-size: 1.375rem;
  line-height: 1.3;
}

.ds-container .blog-wrapper .post-media-meta .text {
  color: var(--ds-text-secondary);
}

.ds-container .blog-wrapper .blog-category {
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-weight: 600;
  color: var(--ds-primary);
}

/* Share/like footer of blog article -> ds-action buttons */
.ds-container .blog-wrapper .footer-actions .action-btn {
  background: var(--ds-surface-sec);
  border-radius: var(--ds-radius-md);
  color: var(--ds-text-secondary);
  font-weight: 600;
}

.ds-container .blog-wrapper .footer-actions .action-btn:hover {
  background: var(--ds-muted);
  color: var(--ds-primary);
}

/* Ollo SVG icons inside chat compose tools */
.x-form-tools .svg-icon,
.x-form-tools .svg-icon .svg-container {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

.x-form-tools .svg-icon svg,
.x-form-tools .svg-icon .svg-container svg {
  display: block;
}

.x-form-tools>li .svg-icon {
  margin: 0;
}

/* ---------- Facebook Messenger: Full-Viewport 3-Column Layout ---------- */
body:has(.fb-messenger-shell),
body:has(.ds-messages) {
  overflow: hidden !important;
}

.fb-messenger-shell {
  width: 100% !important;
  max-width: 100% !important;
  height: calc(100vh - 56px) !important;
  max-height: calc(100vh - 56px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--ds-surface-el, #ffffff);
}

.fb-messenger-layout {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   LEFT COLUMN: CHATS SIDEBAR
   ========================================================================== */
.fb-chats-sidebar {
  width: 360px;
  min-width: 320px;
  max-width: 400px;
  flex: 0 0 360px;
  border-right: 1px solid var(--border-color, #e4e6eb);
  display: flex;
  flex-direction: column;
  background: var(--ds-surface-el, #ffffff);
  height: 100%;
  overflow: hidden;
  z-index: 5;
}

.fb-chats-header {
  padding: 12px 16px 8px;
  flex: 0 0 auto;
  border-bottom: 1px solid transparent;
}

.fb-chats-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-chats-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0;
  letter-spacing: -0.5px;
}

.fb-chats-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-header-round-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-muted, #f0f2f5);
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-primary, #050505);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.1s;
  text-decoration: none !important;
}

.fb-header-round-btn:hover {
  background: #e4e6eb;
  color: var(--ds-text-primary, #050505);
}

.fb-chats-search-bar {
  display: flex;
  align-items: center;
  background: var(--ds-muted, #f0f2f5);
  border-radius: 20px;
  padding: 0 12px;
  height: 36px;
  margin-bottom: 10px;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.fb-chats-search-bar:focus-within {
  background: #ffffff;
  box-shadow: 0 0 0 2px #1877f2;
}

.fb-chats-search-bar .search-icon {
  color: #65676b;
  margin-right: 8px;
  font-size: 14px;
}

.fb-search-input {
  border: none;
  background: transparent;
  width: 100%;
  outline: none;
  font-size: 14px;
  color: var(--ds-text-primary, #050505);
}

.fb-filter-pills-row {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}

.fb-filter-pills-row::-webkit-scrollbar {
  display: none;
}

.fb-pill-btn {
  border: none;
  background: transparent;
  padding: 6px 12px;
  border-radius: 18px;
  font-size: 14px;
  font-weight: 600;
  color: #65676b;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fb-pill-btn:hover {
  background: var(--ds-muted, #f0f2f5);
  color: var(--ds-text-primary, #050505);
}

.fb-pill-btn.active {
  background: #e7f3ff;
  color: #1877f2;
}

.fb-chats-body {
  flex: 1;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fb-threads-scroller {
  height: 100% !important;
  overflow-y: auto;
  padding: 4px 8px;
}

.fb-conversations-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-chat-item {
  border-radius: 10px;
  margin-bottom: 2px;
  transition: background 0.15s ease;
}

.fb-chat-item>a.data-container {
  display: flex;
  align-items: center;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none !important;
  position: relative;
}

.fb-chat-item:hover {
  background: var(--ds-muted, #f2f2f2);
}

.fb-chat-item.active {
  background: #eaf3ff;
}

.fb-chat-item .data-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  margin-right: 12px;
}

.fb-chat-item .data-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.fb-online-badge {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  background: #31a24c;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}

.fb-chat-item .data-content {
  flex: 1;
  min-width: 0;
}

.fb-chat-item .name-row .name {
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  margin-bottom: 2px;
}

.fb-chat-item .preview-row {
  font-size: 13px;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fb-chat-item .preview-row .text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 180px;
}

.fb-chat-item.unread .name-row .name {
  font-weight: 700;
}

.fb-chat-item.unread .preview-row {
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
}

.fb-chat-item .unread-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1877f2;
  margin-left: 8px;
  flex-shrink: 0;
}

.fb-no-chats-placeholder {
  text-align: center;
  padding: 40px 16px;
  color: #65676b;
}

.fb-no-chats-placeholder i {
  font-size: 40px;
  margin-bottom: 12px;
  opacity: 0.5;
}

/* ==========================================================================
   CENTER & RIGHT CONTAINER
   ========================================================================== */
.fb-conversation-column {
  flex: 1;
  min-width: 0;
  display: flex;
  height: 100%;
  overflow: hidden;
  background: var(--ds-surface-el, #ffffff);
}

.fb-messenger-conversation-wrapper {
  display: flex;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* ==========================================================================
   MIDDLE: ACTIVE CHAT MAIN
   ========================================================================== */
.fb-chat-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--ds-surface-el, #ffffff);
  position: relative;
}

.fb-chat-header {
  height: 64px;
  border-bottom: 1px solid var(--border-color, #e4e6eb);
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  background: var(--ds-surface-el, #ffffff);
  z-index: 4;
}

.fb-chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.fb-chat-back-btn {
  border: none;
  background: transparent;
  font-size: 18px;
  color: #8739f9;
  cursor: pointer;
  padding: 6px;
  margin-right: 4px;
}

.fb-chat-header-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.fb-chat-header-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.fb-chat-header-info {
  min-width: 0;
}

.fb-chat-header-title {
  margin: 0;
  line-height: 1.2;
}

.fb-header-link {
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
  text-decoration: none !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.fb-chat-header-subtitle {
  font-size: 12px;
  color: #65676b;
  margin-top: 2px;
  display: flex;
  align-items: center;
}

.fb-status-active {
  color: #31a24c;
  font-weight: 500;
}

.fb-status-active .status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: #31a24c;
  border-radius: 50%;
  margin-right: 4px;
}

.fb-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-action-circle-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8739f9;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fb-action-circle-btn:hover {
  background: var(--ds-muted, #f0f2f5);
}

.fb-action-circle-btn.fb-info-btn.active {
  background: rgba(135, 57, 249, 0.12);
  color: #8739f9;
}

/* Chat Messages Feed */
.fb-chat-body {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.fb-chat-body .chat-conversations.js_scroller {
  flex: 1;
  height: 100% !important;
  max-height: none !important;
  overflow-y: auto;
  padding: 16px 20px;
  list-style: none;
  margin: 0;
}

.fb-chat-body .chat-conversations ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fb-chat-body .chat-conversations li {
  margin-bottom: 8px;
  list-style: none;
}

/* Facebook Message Bubbles */
.fb-chat-body .conversation {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.fb-chat-body .conversation.right {
  flex-direction: row-reverse;
}

.fb-chat-body .conversation-user {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  margin-bottom: 2px;
}

.fb-chat-body .conversation-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.fb-chat-body .conversation-body {
  max-width: 68%;
}

.fb-chat-body .conversation:not(.right) .conversation-body .text {
  background: var(--ds-muted, #f0f2f5);
  color: var(--ds-text-primary, #050505);
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 15px;
  display: inline-block;
  line-height: 1.4;
  word-break: break-word;
}

.fb-chat-body .conversation.right .conversation-body {
  text-align: right;
}

.fb-chat-body .conversation.right .conversation-body .text {
  background: linear-gradient(135deg, #0084ff 0%, #8739f9 100%);
  color: #ffffff;
  border-radius: 18px;
  padding: 10px 14px;
  font-size: 15px;
  display: inline-block;
  line-height: 1.4;
  word-break: break-word;
  text-align: left;
}

.fb-chat-body .conversation .time {
  font-size: 11px;
  color: #8a8d91;
  margin-top: 4px;
  padding: 0 4px;
}

.fb-chat-body .conversation.right .time {
  text-align: right;
}

.fb-chat-body .conversation .seen {
  font-size: 11px;
  color: #8a8d91;
  margin-top: 2px;
  text-align: right;
}

/* Floating Scroll-to-Bottom Button */
.fb-scroll-bottom-btn {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-surface-el, #ffffff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color, #e4e6eb);
  z-index: 100;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-primary, #050505);
  font-size: 16px;
  transition: transform 0.2s ease, background 0.15s ease;
}

.fb-scroll-bottom-btn:hover {
  transform: translateX(-50%) translateY(-2px);
  background: #f0f2f5;
}

/* Composer Footer */
.fb-chat-footer {
  border-top: 1px solid var(--border-color, #e4e6eb);
  padding: 10px 16px;
  flex-shrink: 0;
  background: var(--ds-surface-el, #ffffff);
}

.fb-messenger-form {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.fb-form-left-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fb-tool-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8739f9;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fb-tool-btn:hover {
  background: var(--ds-muted, #f0f2f5);
}

.fb-form-input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  background: var(--ds-muted, #f0f2f5);
  border-radius: 20px;
  padding: 6px 14px;
  min-height: 38px;
  position: relative;
}

.fb-message-textarea {
  flex: 1;
  border: none !important;
  background: transparent !important;
  resize: none !important;
  font-size: 15px !important;
  color: var(--ds-text-primary, #050505) !important;
  outline: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  padding: 0 !important;
  max-height: 120px !important;
}

.fb-textarea-emoji-btn {
  border: none;
  background: transparent;
  color: #8739f9;
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
}

.fb-form-right-tools {
  display: flex;
  align-items: center;
}

.fb-send-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: #8739f9;
  font-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease;
}

.fb-send-btn:hover {
  transform: scale(1.1);
}

.fb-like-icon {
  display: block;
}

.fb-send-icon {
  display: none;
}

.fb-send-btn.has-text .fb-like-icon {
  display: none;
}

.fb-send-btn.has-text .fb-send-icon {
  display: block;
}

/* Typing Indicator */
.chat-typing {
  padding: 6px 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #65676b;
}

.typing-bubble {
  background: var(--ds-muted, #f0f2f5);
  border-radius: 12px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.typing-bubble .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #8a8d91;
  animation: typingBounce 1.4s infinite ease-in-out both;
}

.typing-bubble .dot:nth-child(1) {
  animation-delay: -0.32s;
}

.typing-bubble .dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {

  0%,
  80%,
  100% {
    transform: scale(0);
  }

  40% {
    transform: scale(1);
  }
}

/* ==========================================================================
   RIGHT: CONVERSATION DETAILS / INFO SIDEBAR
   ========================================================================== */
.fb-chat-details {
  width: 340px;
  min-width: 300px;
  max-width: 360px;
  flex: 0 0 340px;
  border-left: 1px solid var(--border-color, #e4e6eb);
  background: var(--ds-surface-el, #ffffff);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: margin-right 0.25s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}

.fb-chat-details.collapsed {
  display: none;
  width: 0;
  flex: 0 0 0;
  border-left: none;
}

.fb-details-scroller {
  height: 100%;
  overflow-y: auto;
  padding-bottom: 20px;
}

.fb-details-profile {
  padding: 24px 16px 12px;
  text-align: center;
}

.fb-details-avatar-wrap {
  position: relative;
  width: 72px;
  height: 72px;
  margin: 0 auto;
}

.fb-details-avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.fb-online-badge-lg {
  position: absolute;
  bottom: 2px;
  right: 2px;
  width: 16px;
  height: 16px;
  background: #31a24c;
  border-radius: 50%;
  border: 3px solid #ffffff;
}

.fb-details-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 10px 0 2px;
}

.fb-details-status {
  font-size: 13px;
  color: #65676b;
}

.fb-details-quick-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 14px 0 18px;
}

.fb-quick-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: none;
  text-decoration: none !important;
  cursor: pointer;
}

.fb-quick-action-item .action-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ds-muted, #f0f2f5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ds-text-primary, #050505);
  font-size: 15px;
  transition: background 0.15s ease;
}

.fb-quick-action-item:hover .action-circle {
  background: #e4e6eb;
}

.fb-quick-action-item .action-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
}

.fb-details-accordions {
  padding: 0 8px;
}

.fb-accordion-item {
  border-radius: 8px;
  margin-bottom: 4px;
}

.fb-accordion-header {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease;
}

.fb-accordion-header:hover {
  background: var(--ds-muted, #f0f2f5);
}

.fb-accordion-chevron {
  font-size: 13px;
  color: #65676b;
  transition: transform 0.2s ease;
}

.fb-accordion-item.open .fb-accordion-chevron {
  transform: rotate(180deg);
}

.fb-accordion-body {
  display: none;
  padding: 4px 8px 12px;
}

.fb-accordion-item.open .fb-accordion-body {
  display: block;
}

.fb-accordion-action {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: none;
  background: transparent;
  font-size: 14px;
  font-weight: 500;
  color: var(--ds-text-primary, #050505);
  border-radius: 6px;
  cursor: pointer;
  text-align: start;
  transition: background 0.15s ease;
}

.fb-accordion-action:hover {
  background: var(--ds-muted, #f0f2f5);
}

.color-preview-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}

.fb-custom-emoji-preview {
  font-size: 18px;
}

/* Empty State */
.fb-chat-empty-state {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 20px;
}

.empty-state-content {
  max-width: 380px;
}

.empty-state-icon i {
  font-size: 64px;
  color: #8739f9;
  margin-bottom: 16px;
}

.empty-state-content h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--ds-text-primary, #050505);
}

.empty-state-content p {
  font-size: 14px;
  color: #65676b;
  margin-bottom: 20px;
}

/* New Message Card */
.fb-new-message-card {
  width: 100%;
  height: 100%;
  border: none !important;
  display: flex;
  flex-direction: column;
}

.fb-new-message-card .card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

.fb-new-chat-to {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-color, #e4e6eb);
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-new-chat-scroller {
  flex: 1;
}

/* ==========================================================================
   DARK MODE ADJUSTMENTS
   ========================================================================== */
body.night-mode .fb-messenger-shell,
body.night-mode .fb-chats-sidebar,
body.night-mode .fb-chat-main,
body.night-mode .fb-chat-details,
body.night-mode .fb-chat-header,
body.night-mode .fb-chat-footer {
  background: var(--ds-surface-el, #242526);
  border-color: var(--ds-border, #393a3b);
}

body.night-mode .fb-chat-item.active {
  background: #252f3d;
}

body.night-mode .fb-chat-item:hover {
  background: var(--ds-muted, #3a3b3c);
}

body.night-mode .fb-header-round-btn,
body.night-mode .fb-chats-search-bar,
body.night-mode .fb-form-input-wrapper,
body.night-mode .fb-quick-action-item .action-circle,
body.night-mode .typing-bubble {
  background: var(--ds-muted, #3a3b3c);
  color: var(--ds-text-primary, #e4e6eb);
}

body.night-mode .fb-pill-btn.active {
  background: rgba(41, 151, 255, 0.2);
  color: #2997ff;
}

body.night-mode .fb-chat-body .conversation:not(.right) .conversation-body .text {
  background: var(--ds-muted, #3a3b3c);
  color: var(--ds-text-primary, #e4e6eb);
}

body.night-mode .fb-scroll-bottom-btn {
  background: #242526;
  border-color: #3e4042;
  color: #e4e6eb;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */
@media (max-width: 1200px) {
  .fb-chat-details {
    width: 300px;
    flex: 0 0 300px;
  }
}

/* Mobile Messenger Details Header */
.fb-details-mobile-header {
  display: flex !important;
  align-items: center !important;
  height: 56px !important;
  padding: 0 16px !important;
  border-bottom: 1px solid var(--border-color, #e4e6eb) !important;
  background: var(--ds-surface-el, #ffffff) !important;
  flex-shrink: 0 !important;
  gap: 12px !important;
  z-index: 10 !important;
}

body.night-mode .fb-details-mobile-header {
  background: #242526 !important;
  border-bottom-color: #3e4042 !important;
}

.fb-details-mobile-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: var(--text-color, #050505) !important;
}

body.night-mode .fb-details-mobile-title {
  color: #e4e6eb !important;
}

.fb-details-mobile-header .fb-chat-back-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--text-color, #050505) !important;
  background: transparent !important;
  transition: background 0.15s ease !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  cursor: pointer !important;
}

body.night-mode .fb-details-mobile-header .fb-chat-back-btn {
  color: #e4e6eb !important;
}

.fb-details-mobile-header .fb-chat-back-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

body.night-mode .fb-details-mobile-header .fb-chat-back-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

html[dir="rtl"] .fb-details-mobile-header .fb-chat-back-btn i {
  transform: scaleX(-1) !important;
}

@media (min-width: 992px) {
  .fb-details-mobile-header {
    display: none !important;
  }
}

@media (max-width: 991.98px) {
  .fb-chat-details {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 99999 !important;
    background: #ffffff !important;
    display: none !important;
    flex-direction: column !important;
    box-shadow: none !important;
    border: none !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  body.night-mode .fb-chat-details {
    background: #242526 !important;
  }

  .fb-chat-details.open-mobile {
    display: flex !important;
    animation: fbMobileDetailsSlide 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  .fb-chat-details.collapsed {
    display: none !important;
  }
}

@keyframes fbMobileDetailsSlide {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 767px) {
  .fb-messenger-shell.sg-offcanvas.active .fb-chats-sidebar {
    display: flex;
    width: 100%;
    max-width: 100%;
    flex: 1;
  }

  .fb-messenger-shell.sg-offcanvas.active .fb-conversation-column {
    display: none;
  }

  .fb-messenger-shell.sg-offcanvas:not(.active) .fb-chats-sidebar {
    display: none;
  }

  .fb-messenger-shell.sg-offcanvas:not(.active) .fb-conversation-column {
    display: flex;
    width: 100%;
    flex: 1;
  }
}

/* ---------- Left/Right sidebar seamless (auto-hide) scrollbar ---------- */
.fb-sidebar.fb-left,
.fb-shell .fb-left,
.ds-page>.ds-left,
.fb-sidebar.fb-right,
.fb-shell .fb-right {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.fb-sidebar.fb-left:hover,
.fb-shell .fb-left:hover,
.ds-page>.ds-left:hover,
.fb-sidebar.fb-right:hover,
.fb-shell .fb-right:hover {
  scrollbar-color: var(--ds-muted) transparent;
}

.fb-sidebar.fb-left::-webkit-scrollbar,
.fb-shell .fb-left::-webkit-scrollbar,
.ds-page>.ds-left::-webkit-scrollbar,
.fb-sidebar.fb-right::-webkit-scrollbar,
.fb-shell .fb-right::-webkit-scrollbar {
  width: 6px;
}

.fb-sidebar.fb-left::-webkit-scrollbar-track,
.fb-shell .fb-left::-webkit-scrollbar-track,
.ds-page>.ds-left::-webkit-scrollbar-track,
.fb-sidebar.fb-right::-webkit-scrollbar-track,
.fb-shell .fb-right::-webkit-scrollbar-track {
  background: transparent;
}

.fb-sidebar.fb-left::-webkit-scrollbar-thumb,
.fb-shell .fb-left::-webkit-scrollbar-thumb,
.ds-page>.ds-left::-webkit-scrollbar-thumb,
.fb-sidebar.fb-right::-webkit-scrollbar-thumb,
.fb-shell .fb-right::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.fb-sidebar.fb-left:hover::-webkit-scrollbar-thumb,
.fb-shell .fb-left:hover::-webkit-scrollbar-thumb,
.ds-page>.ds-left:hover::-webkit-scrollbar-thumb,
.fb-sidebar.fb-right:hover::-webkit-scrollbar-thumb,
.fb-shell .fb-right:hover::-webkit-scrollbar-thumb {
  background: var(--ds-muted);
}

/* messages internal conversation list */
.ds-messages .js_live-messages-alt .js_scroller {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
}

.ds-messages .js_live-messages-alt .js_scroller:hover {
  scrollbar-color: var(--ds-muted) transparent;
}

.ds-messages .js_live-messages-alt .js_scroller::-webkit-scrollbar {
  width: 6px;
}

.ds-messages .js_live-messages-alt .js_scroller::-webkit-scrollbar-track {
  background: transparent;
}

.ds-messages .js_live-messages-alt .js_scroller::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 3px;
  transition: background 0.3s ease;
}

.ds-messages .js_live-messages-alt .js_scroller:hover::-webkit-scrollbar-thumb {
  background: var(--ds-muted);
}

/* ---------- Left sidebar macOS-Dock style icon animation ---------- */
.fb-leftnav .fb-navlink .fb-navicon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.fb-leftnav .fb-navlink:hover .fb-navicon {
  transform: translateY(-4px) scale(1.18);
}

/* touch/press feedback */
.fb-leftnav .fb-navlink:active .fb-navicon {
  transform: translateY(-1px) scale(0.95);
}

/* pop-in echo for the active item when navigating between pages */
@keyframes ds-navicon-pop {
  0% {
    transform: translateY(-8px) scale(0.8);
  }

  60% {
    transform: translateY(1px) scale(1.12);
  }

  100% {
    transform: translateY(0) scale(1);
  }
}

.fb-leftnav .fb-navlink.active .fb-navicon {
  animation: ds-navicon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Top nav macOS-Dock style icon animation ---------- */
.fb-nav .fb-nav-item,
.fb-mnav>a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fb-nav .fb-nav-item .header-icon,
.fb-mnav>a .header-icon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.fb-nav .fb-nav-item:hover .header-icon,
.fb-mnav>a:hover .header-icon {
  transform: translateY(-4px) scale(1.18);
}

.fb-nav .fb-nav-item:active .header-icon,
.fb-mnav>a:active .header-icon {
  transform: translateY(-1px) scale(0.95);
}

.fb-nav .fb-nav-item.active .header-icon,
.fb-mnav>a.active .header-icon {
  animation: ds-navicon-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---------- Top nav right action icons (add/friends/messages/notifications) macOS-Dock animation ---------- */
.fb-hright .navbar-wrapper ul li a .header-icon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.fb-hright .navbar-wrapper ul li a:hover .header-icon {
  transform: translateY(-4px) scale(1.18);
}

.fb-hright .navbar-wrapper ul li a:active .header-icon {
  transform: translateY(-1px) scale(0.95);
}

/* ---------- Outline (line) header/nav icons: match src lucide stroke style ---------- */
/* These top-bar / bottom-bar SVG icons are stroke-only; keep them unfilled so
   the admin "fill" rule (which would otherwise paint them solid) does not break
   the outline look. Scoped to the top bar (.fb-header) and bottom bar so the
   left sidebar (.fb-leftnav) keeps its filled Facebook-style icons.
   Stroke color follows currentColor (= css_header_icons / night color). */
.fb-header .svg-container.header-icon *,
.footer-bottom-bar .svg-container.header-icon * {
  fill: none !important;
}

body.night-mode .fb-header .svg-container.header-icon *,
body.night-mode .footer-bottom-bar .svg-container.header-icon * {
  fill: none !important;
}

/* Override for the main navigation tabs which use filled SVGs from the Facebook clone */
.fb-header .svg-container.header-icon * {
  fill: currentColor !important;
}

body.night-mode .fb-header .svg-container.header-icon * {
  fill: currentColor !important;
}

/* Make right-side and generic header icons a softer black/gray in day mode instead of pure black */
.fb-header .header-icon,
.fb-header .dropdown>a {
  color: #65676b !important;
}

body.night-mode .fb-header .header-icon,
body.night-mode .fb-header .dropdown>a {
  color: #e4e6eb !important;
}

/* Softer stroke color for the line icons in day mode (used only when no admin
   header-icon color is set; otherwise the admin color wins via !important). */
.fb-header .svg-container.header-icon,
.footer-bottom-bar .svg-container.header-icon {
  color: #a8afb9;
}

body.night-mode .fb-header .svg-container.header-icon,
body.night-mode .footer-bottom-bar .svg-container.header-icon {
  color: #e4e6eb;
}

/* search box icon */
.search-wrapper .search-input-icon {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.search-wrapper:hover .search-input-icon {
  transform: translateY(-3px) scale(1.12);
}

/* user menu avatar */
.fb-hright .user-menu {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.fb-hright .user-menu img {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
  will-change: transform;
}

.fb-hright .user-menu:hover img {
  transform: translateY(-4px) scale(1.12);
}

.fb-hright .user-menu:active img {
  transform: translateY(-1px) scale(0.95);
}

/* ---------- Trending card: Liquid Glass design ---------- */
.ds-glass-trending {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow:
    0 8px 32px rgba(31, 38, 135, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -6px 14px rgba(255, 255, 255, 0.12);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0.16) 45%,
      rgba(255, 255, 255, 0.08) 100%);
  color: #1c1e21;
  transition: box-shadow 0.35s ease, transform 0.3s ease;
}

.ds-glass-trending:hover {
  transform: translateY(-2px);
  box-shadow:
    0 14px 40px rgba(31, 38, 135, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -6px 14px rgba(255, 255, 255, 0.16);
}

/* liquid glass sheen sweep */
.ds-glass-trending::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.65) 0%,
      rgba(255, 255, 255, 0) 28%);
}

.ds-glass-trending .card-header,
.ds-glass-trending .card-body {
  position: relative;
  z-index: 1;
}

.ds-glass-trending-title {
  display: flex;
  align-items: center;
  font-weight: 800;
  letter-spacing: 0.3px;
  color: #1c1e21;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

.ds-glass-trending-title svg {
  fill: currentColor;
  opacity: 0.9;
}

.ds-glass-trending .trending-item {
  position: relative;
  z-index: 1;
  margin: 4px 0;
  padding: 7px 10px;
  border-radius: 10px;
  transition: background 0.2s ease, transform 0.2s ease;
}

.ds-glass-trending .trending-item:hover {
  background: rgba(255, 255, 255, 0.4);
  transform: translateX(3px);
}

.ds-glass-trending .trending-item .hash {
  color: #1c1e21;
  font-weight: 700;
}

.ds-glass-trending .trending-item .frequency {
  color: #e63946;
  font-weight: 600;
}

.ds-glass-trending .trending-item:hover .hash {
  text-decoration: underline;
}

/* dark / night mode glass */
body.night-mode .ds-glass-trending {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    inset 0 -6px 14px rgba(255, 255, 255, 0.05);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.10) 0%,
      rgba(255, 255, 255, 0.04) 45%,
      rgba(20, 20, 30, 0.35) 100%);
  color: #eef0f2;
}

body.night-mode .ds-glass-trending:hover {
  box-shadow:
    0 14px 40px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -6px 14px rgba(255, 255, 255, 0.06);
}

body.night-mode .ds-glass-trending::before {
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.16) 0%,
      rgba(255, 255, 255, 0) 30%);
}

body.night-mode .ds-glass-trending-title {
  color: #f0f2f5;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

body.night-mode .ds-glass-trending .trending-item:hover {
  background: rgba(255, 255, 255, 0.10);
}

body.night-mode .ds-glass-trending .trending-item .hash {
  color: #f0f2f5;
}

body.night-mode .ds-glass-trending .trending-item .frequency {
  color: #ff8a9a;
}

/* ---------- Right sidebar: unified Liquid Glass for the other cards ---------- */
.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal) {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.3);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 8px 30px rgba(31, 38, 135, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.42) 0%,
      rgba(255, 255, 255, 0.14) 45%,
      rgba(255, 255, 255, 0.06) 100%);
  color: var(--fb-text);
}

.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.6) 0%,
      rgba(255, 255, 255, 0) 30%);
}

.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-header,
.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-body {
  position: relative;
  z-index: 1;
}

.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-header {
  background: transparent;
  color: var(--fb-text);
}

.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-header a,
.fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-header small {
  color: var(--fb-muted);
}

/* promoted users/pages/groups/events — tinted liquid glass */
.fb-right>.card.bg-indigo,
.fb-right>.card.bg-teal {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  box-shadow:
    0 10px 34px rgba(31, 38, 135, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  color: #fff;
}

.fb-right>.card.bg-indigo {
  background:
    linear-gradient(135deg,
      rgba(93, 106, 244, 0.80) 0%,
      rgba(93, 106, 244, 0.45) 45%,
      rgba(124, 58, 237, 0.30) 100%);
}

.fb-right>.card.bg-teal {
  background:
    linear-gradient(135deg,
      rgba(29, 197, 161, 0.80) 0%,
      rgba(29, 197, 161, 0.45) 45%,
      rgba(20, 184, 166, 0.30) 100%);
}

.fb-right>.card.bg-indigo::before,
.fb-right>.card.bg-teal::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.45) 0%,
      rgba(255, 255, 255, 0) 30%);
}

.fb-right>.card.bg-indigo>.card-header,
.fb-right>.card.bg-teal>.card-header,
.fb-right>.card.bg-indigo>.card-body,
.fb-right>.card.bg-teal>.card-body {
  position: relative;
  z-index: 1;
}

/* night mode: dark glass for the other cards */
body.night-mode .fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal) {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow:
    0 8px 30px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.16);
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.09) 0%,
      rgba(255, 255, 255, 0.03) 45%,
      rgba(18, 18, 28, 0.42) 100%);
  color: var(--fb-dark-text);
}

body.night-mode .fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)::before {
  background: linear-gradient(115deg,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0) 30%);
}

body.night-mode .fb-right>.card:not(.ds-glass-trending):not(.bg-indigo):not(.bg-teal)>.card-header {
  color: var(--fb-dark-text);
}

/* Ensure both left and right sidebars in fb-shell are strictly symmetrical and match ds-left */
@media (min-width: 992px) {

  .fb-shell>.fb-left,
  .fb-shell>.fb-right {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 12px !important;
  }
}

/* ==================================================================
   PROFILE HEADER — centered SRC-style layout
   (profile picture centered with camera controls + icons below)
   ================================================================== */

/* avatar camera / crop / delete control buttons: SRC style circular card */
.profile-avatar-change,
.profile-avatar-crop,
.profile-avatar-delete {
  background: #fff;
  color: #050505;
  opacity: 1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.2s ease;
  cursor: pointer;
}

.profile-avatar-change:hover,
.profile-avatar-crop:hover,
.profile-avatar-delete:hover {
  background: #f0f2f5;
  transform: scale(1.12);
}

body.night-mode .profile-avatar-change,
body.night-mode .profile-avatar-crop,
body.night-mode .profile-avatar-delete {
  background: #3a3b3c;
  color: #e4e6eb;
  border-color: rgba(255, 255, 255, 0.12);
}

body.night-mode .profile-avatar-change:hover,
body.night-mode .profile-avatar-crop:hover,
body.night-mode .profile-avatar-delete:hover {
  background: #4e4f50;
}



/* ---------- Wallet page redesign ---------- */
.fb-wallet-balance {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 24px;
  color: #fff;
  background: linear-gradient(135deg, #7b5cff 0%, #4b7bec 45%, #38b6ff 100%);
  box-shadow: 0 12px 30px -12px rgba(75, 123, 236, 0.55);
}

.fb-wallet-balance::before {
  content: "";
  position: absolute;
  right: -45px;
  top: -45px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}

.fb-wallet-balance::after {
  content: "";
  position: absolute;
  right: 22px;
  bottom: -70px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
}

.fb-wallet-balance-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.fb-wallet-balance-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  color: #fff;
  opacity: 0.92;
}

.fb-wallet-balance-head .svg-container.header-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  color: #fff;
}

.fb-wallet-balance-amount {
  position: relative;
  z-index: 1;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  margin-top: 14px;
  color: #fff;
}

.fb-wallet-balance-foot {
  position: relative;
  z-index: 1;
  margin-top: 18px;
}

.fb-wallet-balance-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.2);
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  backdrop-filter: blur(4px);
}

.fb-wallet-actions {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.fb-wallet-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: 12px;
  font-weight: 600;
}

.fb-wallet-actions .btn-primary {
  background: linear-gradient(135deg, #4b7bec, #38b6ff);
  border-color: transparent;
}

.btn-wallet-add {
  background: rgba(75, 123, 236, 0.1);
  color: #4b7bec;
  border: 1px solid rgba(75, 123, 236, 0.2);
}

.btn-wallet-add:hover {
  background: rgba(75, 123, 236, 0.16);
  color: #3871e0;
}

body.night-mode .btn-wallet-add {
  background: rgba(95, 143, 255, 0.12);
  color: #7c9cf8;
  border-color: rgba(95, 143, 255, 0.22);
}

.fb-wallet-actions .svg-container.header-icon {
  width: 20px;
  height: 20px;
  display: inline-flex;
}

.fb-wallet-credit {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px;
  border: 1px solid var(--divider, #dddfe2);
  border-radius: 14px;
  background: var(--card-bg, #fff);
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

body.night-mode .fb-wallet-credit {
  border-color: rgba(255, 255, 255, 0.1);
  background: var(--card-bg, #242526);
}

.fb-wallet-credit:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.18);
  border-color: rgba(75, 123, 236, 0.5);
}

.fb-wallet-credit-icon {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.fb-wallet-credit-icon .svg-container.header-icon {
  width: 22px;
  height: 22px;
  display: inline-flex;
  color: #fff;
}

.fb-wallet-credit-meta {
  min-width: 0;
}

.fb-wallet-credit-title {
  font-size: 14px;
  font-weight: 600;
  color: #050505;
  white-space: nowrap;
}

.fb-wallet-credit-sub {
  font-size: 12px;
  color: #65676b;
}

body.night-mode .fb-wallet-credit-title {
  color: #e4e6eb;
}

body.night-mode .fb-wallet-credit-sub {
  color: #b0b3b8;
}

.fb-wg-blue {
  background: linear-gradient(135deg, #3a8dff, #4b7bec);
}

.fb-wg-orange {
  background: linear-gradient(135deg, #ffb347, #ff8c32);
}

.fb-wg-green {
  background: linear-gradient(135deg, #2ecc71, #27ae60);
}

.fb-wg-purple {
  background: linear-gradient(135deg, #9b51e0, #7134d6);
}

.fb-wg-red {
  background: linear-gradient(135deg, #ff6b6b, #ee5253);
}

.fb-wallet-txn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 14px;
}

.fb-wallet-txn i {
  font-size: 15px;
}

.fb-wallet-txn-in {
  color: #28a745;
}

.fb-wallet-txn-out {
  color: #dc3545;
}









/* ============================================================
   ADMINCP DESIGN OVERHAUL (Ollo modern)
   Scoped to admin panel only (.admin-sidebar / .sg-offcanvas-mainbar)
   Modern professional look + subtle life animation
   ============================================================ */

/* --- Admin shell background & main card polish --- */
.sg-offcanvas.admin-panel-shell>.row {
  gap: 20px;
}

/* --- Sidebar cards: modern gradient cards --- */
.admin-sidebar .card {
  background: linear-gradient(160deg, var(--ds-surface-el) 0%, var(--ds-surface-sec) 100%);
  border: 1px solid var(--ds-border) !important;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.admin-sidebar .card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.10);
}

/* --- Animated accent top line on each card --- */
.admin-sidebar .card {
  position: relative;
}

.admin-sidebar .card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #5e72e4, #11cdef, #2dce89);
  background-size: 200% 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.admin-sidebar .card:hover::before {
  opacity: 1;
  animation: admin-flow 3s linear infinite;
}

@keyframes admin-flow {
  0% {
    background-position: 0% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

/* --- Card headers: modern block titles --- */
.admin-sidebar .card-header.block-title {
  position: relative;
  background: linear-gradient(120deg, rgba(94, 114, 228, 0.12), rgba(17, 205, 239, 0.06));
  border-bottom: 1px solid var(--ds-border);
  padding: 16px 20px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--ds-primary);
  border-radius: 18px 18px 0 0 !important;
}

/* --- Side nav link pills --- */
.admin-sidebar .card .side-nav>li>a {
  position: relative;
  border-radius: 12px;
  padding: 11px 16px;
  margin: 2px 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  transition: padding-left 0.28s ease, background 0.28s ease, color 0.28s ease, transform 0.28s ease;
}

/* hover: slide + tint */
.admin-sidebar .card .side-nav>li>a:hover {
  padding-left: 22px;
  background: rgba(94, 114, 228, 0.10);
  color: var(--ds-primary);
  transform: translateX(2px);
}

/* active: gradient pill + animated left bar */
.admin-sidebar .card .side-nav>li.active>a {
  background: linear-gradient(120deg, var(--ds-primary) 0%, #5e72e4 60%, #11cdef 100%);
  color: #ffffff !important;
  box-shadow: 0 8px 18px rgba(94, 114, 228, 0.35);
}

.admin-sidebar .card .side-nav>li.active>a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 4px;
  height: 60%;
  transform: translateY(-50%);
  background: #fff;
  border-radius: 0 4px 4px 0;
}

/* subtle shimmer on active pill */
.admin-sidebar .card .side-nav>li.active>a::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 50%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.25), transparent);
  transform: skewX(-20deg);
  animation: admin-shine 3.2s ease-in-out infinite;
}

@keyframes admin-shine {

  0%,
  60% {
    left: -60%;
  }

  100% {
    left: 130%;
  }
}

/* icon color in links (FA + svg) */
.admin-sidebar .card .side-nav li i,
.admin-sidebar .card .side-nav li .svg-container {
  color: var(--ds-text-secondary);
  transition: color 0.28s ease, transform 0.28s ease;
}

.admin-sidebar .card .side-nav>li>a:hover i,
.admin-sidebar .card .side-nav>li>a:hover .svg-container {
  color: var(--ds-primary);
}

.admin-sidebar .card .side-nav>li.active>a i,
.admin-sidebar .card .side-nav>li.active>a .svg-container {
  color: #ffffff;
}

/* --- Sub-nav (collapsed children) --- */
.admin-sidebar .card .side-nav ul {
  padding: 2px 0 6px 12px;
  position: relative;
}

.admin-sidebar .card .side-nav ul::before {
  content: "";
  position: absolute;
  left: 24px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--ds-primary), transparent);
  opacity: 0.25;
}

.admin-sidebar .card .side-nav ul li a {
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background 0.25s ease, padding-left 0.25s ease, color 0.25s ease;
}

.admin-sidebar .card .side-nav ul li a:hover {
  background: rgba(94, 114, 228, 0.08);
  padding-left: 20px;
  color: var(--ds-primary);
}

.admin-sidebar .card .side-nav ul li.active>a {
  background: rgba(94, 114, 228, 0.16);
  color: var(--ds-primary);
  font-weight: 600;
}

/* --- Mini badges (payment requests counts) --- */
.admin-sidebar .card .side-nav .badge {
  background: linear-gradient(120deg, #f5365c, #ff8d72) !important;
  box-shadow: 0 3px 8px rgba(245, 54, 92, 0.4);
  font-weight: 700;
}

/* --- Main bar cards: softer corners --- */
.sg-offcanvas-mainbar .card {
  border-radius: 16px;
}

.sg-offcanvas-mainbar .card .card-header {
  border-radius: 16px 16px 0 0;
}

/* --- Night mode adjustments --- */
body.night-mode .admin-sidebar .card {
  background: linear-gradient(160deg, var(--ds-surface-el) 0%, #16161a 100%);
  border-color: var(--ds-border) !important;
}

body.night-mode .admin-sidebar .card .side-nav>li.active>a {
  box-shadow: 0 8px 18px rgba(94, 114, 228, 0.5);
}

/* --- Subtle entrance animation for the whole admin page --- */
.admin-sidebar .card,
.sg-offcanvas-mainbar .card {
  animation: admin-rise 0.5s ease both;
}

.admin-sidebar .card:nth-child(2) {
  animation-delay: 0.05s;
}

.admin-sidebar .card:nth-child(3) {
  animation-delay: 0.10s;
}

.admin-sidebar .card:nth-child(4) {
  animation-delay: 0.15s;
}

.admin-sidebar .card:nth-child(5) {
  animation-delay: 0.20s;
}

.admin-sidebar .card:nth-child(6) {
  animation-delay: 0.25s;
}

.admin-sidebar .card:nth-child(7) {
  animation-delay: 0.30s;
}

.admin-sidebar .card:nth-child(8) {
  animation-delay: 0.35s;
}

.admin-sidebar .card:nth-child(9) {
  animation-delay: 0.40s;
}

.admin-sidebar .card:nth-child(10) {
  animation-delay: 0.45s;
}

@keyframes admin-rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ============================================================
   ADMINCP UI POLISH 2 — Professional, cohesive & fast
   Blue-first (--ds-primary). CSS-only, no layout changes.
   ============================================================ */

/* ---------- 1. CONTENT CARDS (main area) ---------- */
.sg-offcanvas-mainbar .card {
  border: 1px solid var(--ds-border) !important;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(15, 40, 90, 0.05);
  overflow: hidden;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.sg-offcanvas-mainbar .card:hover {
  box-shadow: 0 12px 28px rgba(15, 40, 90, 0.09);
}

/* ---- Page title headers (with-icon) ---- */
.sg-offcanvas-mainbar .card-header.with-icon {
  background: linear-gradient(120deg, rgba(0, 102, 204, 0.05), rgba(17, 205, 239, 0.04));
  border-bottom: 1px solid var(--ds-border);
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--ds-text-primary);
  padding: 15px 20px;
}

.sg-offcanvas-mainbar .card-header.with-icon i,
.sg-offcanvas-mainbar .card-header.with-icon .svg-container {
  color: var(--ds-primary);
}

.sg-offcanvas-mainbar .card-header.with-icon .btn {
  margin-top: -2px;
}

/* ---- Card body / footer ---- */
.sg-offcanvas-mainbar .card .card-body {
  padding: 20px;
}

.sg-offcanvas-mainbar .card .card-footer {
  background: var(--ds-surface-sec);
  border-top: 1px solid var(--ds-border);
  padding: 13px 20px;
}

/* ---------- 2. DATA TABLES ---------- */
.sg-offcanvas-mainbar .table-responsive {
  border-radius: 12px;
}

.sg-offcanvas-mainbar .table {
  --bs-table-striped-bg: rgba(0, 102, 204, 0.03);
  --bs-table-hover-bg: rgba(0, 102, 204, 0.05);
  margin-bottom: 0;
}

.sg-offcanvas-mainbar .table.bordered,
.sg-offcanvas-mainbar table.table-bordered {
  border-color: var(--ds-border);
}

.sg-offcanvas-mainbar .table thead th {
  background: linear-gradient(180deg, rgba(0, 102, 204, 0.08), rgba(0, 102, 204, 0.04));
  color: var(--ds-text-primary);
  font-weight: 700;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--ds-primary);
  padding: 13px 14px;
  white-space: nowrap;
}

.sg-offcanvas-mainbar .table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--ds-text-primary);
}

.sg-offcanvas-mainbar .table.table-hover tbody tr {
  transition: background-color 0.2s ease;
}

.sg-offcanvas-mainbar .table tbody tr:hover {
  --bs-table-hover-bg: rgba(0, 102, 204, 0.05);
}

/* ---------- 3. FORMS ---------- */
.sg-offcanvas-mainbar .form-control,
.sg-offcanvas-mainbar .form-select {
  border: 1px solid var(--ds-border);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-el);
  font-size: 0.925rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sg-offcanvas-mainbar .form-control:focus,
.sg-offcanvas-mainbar .form-select:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.14);
}

.sg-offcanvas-mainbar .form-select {
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%230066cc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
}

.sg-offcanvas-mainbar .form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ds-text-primary);
}

.sg-offcanvas-mainbar .form-text {
  color: var(--ds-text-secondary);
}

.sg-offcanvas-mainbar .form-table-row {
  gap: 12px;
}

/* ---------- 4. BUTTONS ---------- */
.sg-offcanvas-mainbar .btn-primary,
.sg-offcanvas-mainbar .custom-control-main .btn-primary {
  background: linear-gradient(120deg, var(--ds-primary) 0%, #11cdef 130%);
  border: none;
  box-shadow: 0 4px 14px rgba(0, 102, 204, 0.3);
}

.sg-offcanvas-mainbar .btn-primary:hover,
.sg-offcanvas-mainbar .btn-primary:focus {
  background: linear-gradient(120deg, var(--ds-primary-hover) 0%, #11cdef 130%);
  box-shadow: 0 6px 18px rgba(0, 102, 204, 0.4);
}

.sg-offcanvas-mainbar .btn-light {
  background: var(--ds-surface-sec);
  border-color: var(--ds-border);
  color: var(--ds-text-primary);
}

.sg-offcanvas-mainbar .btn-light:hover {
  background: rgba(0, 102, 204, 0.08);
  border-color: var(--ds-primary);
  color: var(--ds-primary);
}

/* icon (rounded) action buttons — edit / delete */
.sg-offcanvas-mainbar .btn-icon.btn-rounded {
  border-radius: 50%;
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.sg-offcanvas-mainbar .btn-icon.btn-rounded.btn-primary {
  background: rgba(0, 102, 204, 0.1);
  color: var(--ds-primary);
  box-shadow: none;
}

.sg-offcanvas-mainbar .btn-icon.btn-rounded.btn-primary:hover {
  background: var(--ds-primary);
  color: #fff;
}

.sg-offcanvas-mainbar .btn-icon.btn-rounded.btn-danger {
  background: rgba(245, 54, 92, 0.1);
  color: #e6294b;
  box-shadow: none;
}

.sg-offcanvas-mainbar .btn-icon.btn-rounded.btn-danger:hover {
  background: #e6294b;
  color: #fff;
}

/* ---------- 5. TABS ---------- */
.sg-offcanvas-mainbar .nav-tabs .nav-link {
  color: var(--ds-text-secondary);
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 10px 16px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sg-offcanvas-mainbar .nav-tabs .nav-link:hover {
  color: var(--ds-primary);
}

.sg-offcanvas-mainbar .nav-tabs .nav-link.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
  background: transparent;
}

/* ---------- 6. ALERTS / BADGES ---------- */
.sg-offcanvas-mainbar .alert {
  border-radius: 12px;
}

.sg-offcanvas-mainbar .alert-success {
  background: rgba(45, 206, 137, 0.12);
  border: 1px solid rgba(45, 206, 137, 0.35);
  color: #16854f;
}

.sg-offcanvas-mainbar .alert-danger {
  background: rgba(245, 54, 92, 0.12);
  border: 1px solid rgba(245, 54, 92, 0.35);
  color: #c21f3f;
}

/* ---------- 7. DASHBOARD STAT PANELS ---------- */
.sg-offcanvas-mainbar .stat-panel {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 20px rgba(15, 40, 90, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sg-offcanvas-mainbar .stat-panel:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(15, 40, 90, 0.18);
}

.sg-offcanvas-mainbar .stat-panel .bg-icon {
  opacity: 0.14;
}

.sg-offcanvas-mainbar .stat-panel .stat-cell {
  color: #fff;
}

.sg-offcanvas-mainbar .stat-panel .text-xxlg {
  font-weight: 700;
}

.sg-offcanvas-mainbar .stat-panel .text-lg {
  opacity: 0.9;
}

/* ---------- 8. TOGGLES / SWITCHES (blue) ---------- */
.sg-offcanvas-mainbar .switch {
  position: relative;
}

.sg-offcanvas-mainbar .switch input:checked+.slider {
  background: linear-gradient(120deg, var(--ds-primary) 0%, #11cdef 130%);
}

/* ---------- 9. HEADER sub-bar (top) ---------- */
.sg-offcanvas-mainbar>.with-nav {
  margin-bottom: 0;
}

/* ---------- 10. PERFORMANCE: lighter animations ---------- */
/* only transform/opacity for compositor-friendly motion */
.sg-offcanvas-mainbar .card {
  animation: admin-rise 0.35s ease both;
}

.sg-offcanvas-mainbar .card:nth-child(2) {
  animation-delay: 0.04s;
}

.sg-offcanvas-mainbar .card:nth-child(3) {
  animation-delay: 0.08s;
}

.sg-offcanvas-mainbar .card:nth-child(4) {
  animation-delay: 0.12s;
}

.sg-offcanvas-mainbar .card:nth-child(5) {
  animation-delay: 0.16s;
}

.sg-offcanvas-mainbar .card:nth-child(6) {
  animation-delay: 0.20s;
}

/* reduce GPU/repaint work */
.admin-sidebar .card {
  transform: translateZ(0);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {

  .admin-sidebar .card,
  .sg-offcanvas-mainbar .card,
  .sg-offcanvas-mainbar .stat-panel {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .admin-sidebar .card:hover::before,
  .admin-sidebar .card .side-nav>li.active>a::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ---------- NIGHT MODE alignment ---------- */
body.night-mode .sg-offcanvas-mainbar .card {
  background: var(--ds-surface-el);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}

body.night-mode .sg-offcanvas-mainbar .table thead th {
  background: rgba(41, 151, 255, 0.10);
  border-bottom-color: #2997ff;
}

body.night-mode .sg-offcanvas-mainbar .form-control,
body.night-mode .sg-offcanvas-mainbar .form-select {
  color: var(--ds-text-primary);
}

body.night-mode .sg-offcanvas-mainbar .btn-light {
  background: var(--ds-surface-sec);
}

body.night-mode .sg-offcanvas-mainbar .nav-tabs .nav-link.active {
  color: #2997ff;
  border-bottom-color: #2997ff;
}

/* ---------- small screens: keep layout, just breathing room ---------- */
@media (max-width: 767px) {
  .sg-offcanvas-mainbar .card-body {
    padding: 16px;
  }

  .sg-offcanvas-mainbar .card-header.with-icon {
    padding: 13px 16px;
  }
}


/* ============================================================
   ADMINCP UI POLISH 3 — Dashboard, forms/tabs, sidebar & night
   Blue-first. CSS-only (id-based for highcharts). No layout change.
   ============================================================ */

/* ---------- A. DASHBOARD : chart ---------- */
.admin-chart {
  border-radius: 14px;
  border: 1px solid var(--ds-border);
  background: var(--ds-surface-el);
  box-shadow: 0 6px 18px rgba(15, 40, 90, 0.05);
}

/* blue-family column colors (Highcharts series order: Users, Pages, Groups) */
#admin-chart-dashboard .highcharts-series-0 .highcharts-point {
  fill: url(#admin-grad-blue0);
}

#admin-chart-dashboard .highcharts-series-1 .highcharts-point {
  fill: url(#admin-grad-blue1);
}

#admin-chart-dashboard .highcharts-series-2 .highcharts-point {
  fill: url(#admin-grad-blue2);
}

/* fallback solid (if gradient defs unavailable) */
#admin-chart-dashboard .highcharts-series-0 .highcharts-point {
  fill: #5e72e4;
}

#admin-chart-dashboard .highcharts-series-1 .highcharts-point {
  fill: #11cdef;
}

#admin-chart-dashboard .highcharts-series-2 .highcharts-point {
  fill: #2dce89;
}

#admin-chart-dashboard .highcharts-series-0 .highcharts-point:hover {
  fill: #4a5ad0;
}

#admin-chart-dashboard .highcharts-series-1 .highcharts-point:hover {
  fill: #0fb3cf;
}

#admin-chart-dashboard .highcharts-series-2 .highcharts-point:hover {
  fill: #26b877;
}

/* chart title + axis */
#admin-chart-dashboard .highcharts-title {
  color: var(--ds-text-primary) !important;
  fill: var(--ds-text-primary) !important;
  font-weight: 700;
}

#admin-chart-dashboard .highcharts-axis-labels text {
  color: var(--ds-text-secondary) !important;
  fill: var(--ds-text-secondary) !important;
}

#admin-chart-dashboard .highcharts-axis-line,
#admin-chart-dashboard .highcharts-tick {
  stroke: var(--ds-border) !important;
}

#admin-chart-dashboard .highcharts-grid-line {
  stroke: var(--ds-border) !important;
  opacity: 0.35;
}

#admin-chart-dashboard .highcharts-legend-item text {
  color: var(--ds-text-primary) !important;
  fill: var(--ds-text-primary) !important;
}

/* ---------- B. DASHBOARD : stat panels (richer, blue-first) ---------- */
.sg-offcanvas-mainbar .stat-panel {
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 40, 90, 0.12);
}

.sg-offcanvas-mainbar .stat-panel .stat-cell.narrow {
  position: relative;
  padding: 20px 22px;
}

.sg-offcanvas-mainbar .stat-panel .bg-icon {
  position: absolute;
  right: 16px;
  bottom: 12px;
  font-size: 3.2rem;
  opacity: 0.16;
}

.sg-offcanvas-mainbar .stat-panel .text-xxlg {
  font-size: 2rem;
  display: block;
  line-height: 1.05;
}

.sg-offcanvas-mainbar .stat-panel .text-lg {
  display: block;
  margin-top: 2px;
  font-size: 0.95rem;
}

.sg-offcanvas-mainbar .stat-panel a {
  display: inline-block;
  margin-top: 10px;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 600;
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.5);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.sg-offcanvas-mainbar .stat-panel a:hover {
  border-bottom-color: #fff;
}

/* blue gradient flavor for primary panels */
.sg-offcanvas-mainbar .bg-gradient-primary {
  background: linear-gradient(135deg, #5e72e4 0%, #11cdef 100%);
}

.sg-offcanvas-mainbar .bg-gradient-info {
  background: linear-gradient(135deg, #11cdef 0%, #5e72e4 100%);
}

.sg-offcanvas-mainbar .bg-gradient-teal,
.sg-offcanvas-mainbar .bg-gradient-success {
  background: linear-gradient(135deg, #2dce89 0%, #5e72e4 130%);
}

.sg-offcanvas-mainbar .bg-gradient-cyan {
  background: linear-gradient(135deg, #2997ff 0%, #11cdef 100%);
}

.sg-offcanvas-mainbar .bg-gradient-warning {
  background: linear-gradient(135deg, #fbc658 0%, #fb6340 100%);
}

.sg-offcanvas-mainbar .bg-gradient-danger,
.sg-offcanvas-mainbar .bg-gradient-red {
  background: linear-gradient(135deg, #f5365c 0%, #ff8d72 130%);
}

.sg-offcanvas-mainbar .bg-gradient-gray {
  background: linear-gradient(135deg, #8898aa 0%, #5e72e4 160%);
}

/* ---------- C. SETTINGS : tabs ---------- */
.sg-offcanvas-mainbar .card-header.with-nav .nav-tabs {
  border-bottom: 1px solid var(--ds-border);
  margin: 10px -20px -15px;
  padding: 0 20px;
}

.sg-offcanvas-mainbar .nav-tabs .nav-item {
  margin: 0;
}

.sg-offcanvas-mainbar .nav-tabs .nav-link {
  position: relative;
  color: var(--ds-text-secondary);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 2px;
  margin-right: 22px;
  border-radius: 0;
}

.sg-offcanvas-mainbar .nav-tabs .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -3px;
  height: 3px;
  background: transparent;
}

.sg-offcanvas-mainbar .nav-tabs .nav-link:hover {
  color: var(--ds-primary);
}

.sg-offcanvas-mainbar .nav-tabs .nav-link.active {
  color: var(--ds-primary);
  border-bottom-color: var(--ds-primary);
  font-weight: 700;
}

/* settings icon rows */
.sg-offcanvas-mainbar .form-table-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  background: var(--ds-surface-el);
  margin-bottom: 10px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.sg-offcanvas-mainbar .form-table-row:hover {
  border-color: rgba(0, 102, 204, 0.4);
  background: rgba(0, 102, 204, 0.03);
}

.sg-offcanvas-mainbar .form-table-row .main-icon {
  color: var(--ds-primary);
}

.sg-offcanvas-mainbar .form-table-row .form-label h6 {
  margin-bottom: 0;
}

/* ---------- D. SIDEBAR : more icon/color polish ---------- */
.admin-sidebar .card .side-nav>li>a .svg-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  margin-right: 8px;
}

.admin-sidebar .card .side-nav>li>a .svg-container svg {
  filter: drop-shadow(0 1px 2px rgba(15, 40, 90, 0.15));
}

/* active link icon turns white via the existing rule; add a subtle glow */
.admin-sidebar .card .side-nav>li.active>a .svg-container svg {
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.5));
}

/* section headers (block title) icon accent */
.admin-sidebar .card-header.block-title {
  color: var(--ds-primary);
}

/* ---------- E. NIGHT MODE : harmonize remaining elements ---------- */
body.night-mode .sg-offcanvas-mainbar .card {
  background: var(--ds-surface-el);
}

body.night-mode .sg-offcanvas-mainbar .card-header.with-icon {
  background: rgba(41, 151, 255, 0.07);
}

body.night-mode .sg-offcanvas-mainbar .card-header.with-icon i {
  color: #2997ff;
}

body.night-mode .sg-offcanvas-mainbar .table thead th {
  border-bottom-color: #2997ff;
}

body.night-mode .sg-offcanvas-mainbar .table tbody td {
  color: var(--ds-text-primary);
}

body.night-mode .sg-offcanvas-mainbar .form-control,
body.night-mode .sg-offcanvas-mainbar .form-select {
  color: var(--ds-text-primary);
  background-color: var(--ds-surface-el);
}

body.night-mode .sg-offcanvas-mainbar .form-control:focus,
body.night-mode .sg-offcanvas-mainbar .form-select:focus {
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.22);
}

body.night-mode .sg-offcanvas-mainbar .form-table-row {
  border-color: var(--ds-border);
  background: var(--ds-surface-el);
}

body.night-mode .sg-offcanvas-mainbar .nav-tabs .nav-link {
  color: var(--ds-text-secondary);
}

body.night-mode .sg-offcanvas-mainbar .nav-tabs .nav-link.active {
  color: #2997ff;
  border-bottom-color: #2997ff;
}

body.night-mode .admin-chart {
  background: var(--ds-surface-el);
  border-color: var(--ds-border);
}

body.night-mode #admin-chart-dashboard .highcharts-title,
body.night-mode #admin-chart-dashboard .highcharts-axis-labels text,
body.night-mode #admin-chart-dashboard .highcharts-legend-item text {
  color: var(--ds-text-primary) !important;
  fill: var(--ds-text-primary) !important;
}

/* reduce motion guard for any added transitions */
@media (prefers-reduced-motion: reduce) {

  .sg-offcanvas-mainbar .stat-panel,
  .sg-offcanvas-mainbar .form-table-row {
    transition: none !important;
  }
}


/* ==========================================================================
   AUTH: FACEBOOK CLASSIC FIXED VIEWPORT (brand left + card right)
   Completely fixed, zero vertical scrolling, locked within viewport
   ========================================================================== */
html:has(body.auth-page),
body.auth-page {
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  overscroll-behavior: none !important;
  background: #f0f2f5 !important;
}

body.auth-page.night-mode {
  background: #18191a !important;
}

body.auth-page .main-wrapper,
body.auth-page .auth-wrapper,
body.auth-page .auth-shell {
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

.fb-auth-viewport {
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.fb-auth-main {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px 24px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
}

.fb-auth-inner {
  width: 100% !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: 1fr 396px !important;
  gap: 48px !important;
  align-items: center !important;
  box-sizing: border-box !important;
}

/* Brand Left */
.fb-auth-brand {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  padding-right: 24px !important;
  box-sizing: border-box !important;
}

.fb-auth-logo {
  margin-bottom: -4px !important;
}

.fb-auth-brand-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
}

.fb-auth-brand-link img {
  max-height: 52px !important;
  width: auto !important;
  display: block !important;
}

.fb-auth-brand-link .logo-dark {
  display: none !important;
}

body.auth-page.night-mode .fb-auth-brand-link .logo-light {
  display: none !important;
}

body.auth-page.night-mode .fb-auth-brand-link .logo-dark {
  display: block !important;
}

.fb-auth-logotype {
  font-size: 54px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: -2px !important;
  color: #1877f2 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif !important;
}

body.auth-page.night-mode .fb-auth-logotype {
  color: #2997ff !important;
}

.fb-auth-tagline {
  font-size: 26px !important;
  line-height: 1.28 !important;
  font-weight: 400 !important;
  color: #1c1e21 !important;
  margin: 12px 0 0 0 !important;
  max-width: 440px !important;
  letter-spacing: -0.2px !important;
}

body.auth-page.night-mode .fb-auth-tagline {
  color: #e4e6eb !important;
}

/* Panel Right: Card */
.fb-auth-panel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 396px !important;
  box-sizing: border-box !important;
}

.auth-fb-card {
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.1) !important;
  padding: 20px 16px 24px !important;
  box-sizing: border-box !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  transition: box-shadow 0.2s ease !important;
}

.auth-fb-card-wide {
  max-width: 432px !important;
}

body.auth-page.night-mode .auth-fb-card {
  background: #242526 !important;
  border: 1px solid #393a3b !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Inputs */
.auth-fb-field {
  margin-bottom: 12px !important;
  position: relative !important;
}

.auth-fb-row-2 {
  display: flex !important;
  gap: 10px !important;
}

.auth-fb-row-2 .auth-fb-field {
  flex: 1 !important;
  min-width: 0 !important;
}

.auth-fb-input {
  width: 100% !important;
  height: 50px !important;
  font-size: 16px !important;
  padding: 14px 16px !important;
  background: #ffffff !important;
  border: 1px solid #dddfe2 !important;
  border-radius: 6px !important;
  color: #1c1e21 !important;
  box-sizing: border-box !important;
  outline: none !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.auth-fb-signup-inner .auth-fb-input {
  height: 40px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  background: #f5f6f7 !important;
}

.auth-fb-input:focus {
  border-color: #1877f2 !important;
  box-shadow: 0 0 0 2px #e7f3ff !important;
  background: #ffffff !important;
}

.auth-fb-input::placeholder {
  color: #8d949e !important;
}

body.auth-page.night-mode .auth-fb-input {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

body.auth-page.night-mode .auth-fb-input:focus {
  border-color: #2997ff !important;
  box-shadow: 0 0 0 2px rgba(41, 151, 255, 0.25) !important;
}

body.auth-page.night-mode .auth-fb-input::placeholder {
  color: #b0b3b8 !important;
}

/* Buttons */
.auth-fb-btn {
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  line-height: 48px !important;
  border: none !important;
  border-radius: 6px !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  text-align: center !important;
  cursor: pointer !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
  padding: 0 16px !important;
  transition: background-color 0.15s ease, filter 0.15s ease !important;
}

.auth-fb-btn-blue {
  background-color: #1877f2 !important;
  color: #ffffff !important;
  margin-top: 4px !important;
}

.auth-fb-btn-blue:hover {
  background-color: #166fe5 !important;
  color: #ffffff !important;
}

.auth-fb-btn-green {
  background-color: #42b72a !important;
  color: #ffffff !important;
  font-size: 16px !important;
  height: 46px !important;
  line-height: 46px !important;
  padding: 0 20px !important;
  width: auto !important;
  display: inline-block !important;
  margin: 0 auto !important;
}

.auth-fb-btn-green:hover {
  background-color: #36a420 !important;
  color: #ffffff !important;
}

.auth-fb-signup-btn {
  min-width: 194px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 17px !important;
}

/* Forgotten password */
.auth-fb-forgot {
  text-align: center !important;
  margin: 14px 0 !important;
}

.auth-fb-link {
  color: #1877f2 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
}

.auth-fb-link:hover {
  text-decoration: underline !important;
}

body.auth-page.night-mode .auth-fb-link {
  color: #2997ff !important;
}

/* Divider */
.auth-fb-divider {
  border-bottom: 1px solid #dadde1 !important;
  margin: 18px 0 !important;
  height: 0 !important;
}

body.auth-page.night-mode .auth-fb-divider {
  border-bottom-color: #3e4042 !important;
}

/* Social Login - Modern Compact Horizontal Icon Row */
.auth-fb-social-wrap {
  margin-top: 14px !important;
}

.auth-fb-social-divider {
  display: flex !important;
  align-items: center !important;
  text-align: center !important;
  margin: 14px 0 12px 0 !important;
  color: #8a8d91 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

.auth-fb-social-divider::before,
.auth-fb-social-divider::after {
  content: "" !important;
  flex: 1 !important;
  border-bottom: 1px solid #dadde1 !important;
}

.auth-fb-social-divider span {
  padding: 0 10px !important;
}

body.auth-page.night-mode .auth-fb-social-divider {
  color: #b0b3b8 !important;
}

body.auth-page.night-mode .auth-fb-social-divider::before,
body.auth-page.night-mode .auth-fb-social-divider::after {
  border-bottom-color: #3e4042 !important;
}

.auth-fb-social {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.auth-fb-social .hr-heading {
  display: none !important;
}

.auth-fb-social .btn-social {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 1px solid #dadde1 !important;
  background-color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  position: relative !important;
}

.auth-fb-social .btn-social:hover {
  background-color: #f0f2f5 !important;
  border-color: #ccd0d5 !important;
  transform: translateY(-2px) scale(1.06) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
}

.auth-fb-social .btn-social:active {
  transform: translateY(0) scale(0.98) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

body.auth-page.night-mode .auth-fb-social .btn-social {
  background-color: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

body.auth-page.night-mode .auth-fb-social .btn-social:hover {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.auth-fb-social .btn-social .btn-social-text {
  display: none !important;
}

.auth-fb-social .btn-social .svg-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
}

.auth-fb-social .btn-social .svg-container svg,
.auth-fb-social .btn-social img {
  display: block !important;
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  margin: 0 auto !important;
  vertical-align: middle !important;
}

.auth-fb-social .btn-social-apple svg {
  width: 20px !important;
  height: 20px !important;
  fill: #1c1e21 !important;
}

body.auth-page.night-mode .auth-fb-social .btn-social-apple svg,
body.auth-page.night-mode .auth-fb-social .btn-social-apple svg path {
  fill: #ffffff !important;
}

.auth-fb-social .btn-social-google svg {
  width: 22px !important;
  height: 22px !important;
}

.auth-fb-social .btn-social-facebook svg {
  width: 24px !important;
  height: 24px !important;
}

/* Signup Header */
.auth-fb-signup-header {
  margin-bottom: 8px !important;
}

.auth-fb-signup-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1c1e21 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

.auth-fb-signup-subtitle {
  font-size: 14px !important;
  color: #606770 !important;
  margin: 4px 0 0 0 !important;
}

body.auth-page.night-mode .auth-fb-signup-title {
  color: #e4e6eb !important;
}

body.auth-page.night-mode .auth-fb-signup-subtitle {
  color: #b0b3b8 !important;
}

.auth-fb-scroll-body {
  max-height: calc(100vh - 240px) !important;
  overflow-y: auto !important;
  padding-right: 2px !important;
}

.auth-fb-scroll-body::-webkit-scrollbar {
  width: 4px;
}

.auth-fb-scroll-body::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

/* Bottom text & switch */
.auth-fb-switch {
  text-align: center !important;
  margin-top: 14px !important;
  font-size: 14px !important;
  color: #606770 !important;
}

.auth-fb-switch a {
  color: #1877f2 !important;
  font-weight: 600 !important;
  text-decoration: none !important;
}

.auth-fb-switch a:hover {
  text-decoration: underline !important;
}

body.auth-page.night-mode .auth-fb-switch {
  color: #b0b3b8 !important;
}

body.auth-page.night-mode .auth-fb-switch a {
  color: #2997ff !important;
}

.auth-fb-page-note {
  margin-top: 24px !important;
  font-size: 14px !important;
  color: #1c1e21 !important;
  text-align: center !important;
}

.auth-fb-page-note a {
  color: #1c1e21 !important;
  text-decoration: none !important;
}

.auth-fb-page-note a:hover {
  text-decoration: underline !important;
}

body.auth-page.night-mode .auth-fb-page-note,
body.auth-page.night-mode .auth-fb-page-note a {
  color: #e4e6eb !important;
}

/* Contact form within auth viewport */
.fb-auth-contact .fb-contact-textarea {
  height: 90px !important;
  min-height: 80px !important;
  padding: 10px 14px !important;
  resize: vertical !important;
  font-family: inherit !important;
}

.fb-auth-contact .auth-fb-field {
  margin-bottom: 10px !important;
}

/* Pinned Footer — Ultra Slim Single-Line Layout */
.fb-auth-footer {
  flex: 0 0 auto !important;
  width: 100% !important;
  background: #ffffff !important;
  padding: 8px 16px !important;
  box-sizing: border-box !important;
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  line-height: 1 !important;
  z-index: 10 !important;
}

body.night-mode .fb-auth-footer,
body.auth-page.night-mode .fb-auth-footer {
  background: #18191a !important;
  border-top-color: #393a3b !important;
}

.fb-auth-footer-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: wrap !important;
  gap: 8px 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

.fb-auth-footer-row a.fb-auth-footer-item {
  color: #8a8d91 !important;
  font-size: 11.5px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

.fb-auth-footer-row a.fb-auth-footer-item:hover {
  color: #1877f2 !important;
  text-decoration: underline !important;
}

body.night-mode .fb-auth-footer-row a.fb-auth-footer-item,
body.auth-page.night-mode .fb-auth-footer-row a.fb-auth-footer-item {
  color: #b0b3b8 !important;
}

body.night-mode .fb-auth-footer-row a.fb-auth-footer-item:hover,
body.auth-page.night-mode .fb-auth-footer-row a.fb-auth-footer-item:hover {
  color: #2997ff !important;
}

.fb-auth-footer-row span.fb-auth-footer-item.copyright {
  font-size: 11px !important;
  color: #8a8d91 !important;
  white-space: nowrap !important;
  margin: 0 0 0 6px !important;
  padding-left: 12px !important;
  border-left: 1px solid rgba(0, 0, 0, 0.15) !important;
}

body.night-mode .fb-auth-footer-row span.fb-auth-footer-item.copyright,
body.auth-page.night-mode .fb-auth-footer-row span.fb-auth-footer-item.copyright {
  border-left-color: rgba(255, 255, 255, 0.15) !important;
  color: #8a8d91 !important;
}

html[dir="RTL"] .fb-auth-footer-row span.fb-auth-footer-item.copyright {
  border-left: none !important;
  border-right: 1px solid rgba(0, 0, 0, 0.15) !important;
  margin: 0 6px 0 0 !important;
  padding-left: 0 !important;
  padding-right: 12px !important;
}

html[dir="RTL"] body.night-mode .fb-auth-footer-row span.fb-auth-footer-item.copyright,
html[dir="RTL"] body.auth-page.night-mode .fb-auth-footer-row span.fb-auth-footer-item.copyright {
  border-right-color: rgba(255, 255, 255, 0.15) !important;
}

/* Mobile & Tablet Responsive */
@media (max-width: 899.98px) {
  .fb-auth-inner {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    text-align: center !important;
    max-width: 420px !important;
  }

  .fb-auth-brand {
    align-items: center !important;
    padding-right: 0 !important;
  }

  .fb-auth-logotype {
    font-size: 38px !important;
  }

  .fb-auth-tagline {
    font-size: 16px !important;
    max-width: 320px !important;
    margin-top: 6px !important;
  }

  .fb-auth-panel {
    max-width: 100% !important;
  }

  .fb-auth-main {
    padding: 12px 16px !important;
  }

  .fb-auth-footer {
    padding: 10px 16px 14px !important;
  }

  .fb-auth-footer .auth-footer-links {
    gap: 4px 12px !important;
  }
}

/* ============================================================
   STATIC PAGES — content card + footer links polish
   (default-style internal page: header + page header + card)
   ============================================================ */
/* give the static text breathing room inside the card */
.ds-container .ds-card .static-page-content {
  padding: 0.75rem 1.25rem 1.5rem;
  color: #65676b;
  font-size: 15px;
  line-height: 1.75;
}

/* keep headings readable inside static text */
.ds-container .ds-card .static-page-content h1,
.ds-container .ds-card .static-page-content h2,
.ds-container .ds-card .static-page-content h3,
.ds-container .ds-card .static-page-content h4,
.ds-container .ds-card .static-page-content h5,
.ds-container .ds-card .static-page-content h6 {
  margin: 1.2em 0 0.5em;
  color: #1c1e21;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.ds-container .ds-card .static-page-content p {
  margin: 0 0 0.9em;
}

.ds-container .ds-card .static-page-content ul,
.ds-container .ds-card .static-page-content ol {
  margin: 0 0 0.9em;
  padding-left: 1.5rem;
}

.ds-container .ds-card .static-page-content a {
  color: var(--ds-primary);
}

.ds-container .ds-card .static-page-content img {
  max-width: 100%;
  height: auto;
}

/* night mode text colors */
body.night-mode .ds-container .ds-card .static-page-content {
  color: #b0b3b8;
}

body.night-mode .ds-container .ds-card .static-page-content h1,
body.night-mode .ds-container .ds-card .static-page-content h2,
body.night-mode .ds-container .ds-card .static-page-content h3,
body.night-mode .ds-container .ds-card .static-page-content h4,
body.night-mode .ds-container .ds-card .static-page-content h5,
body.night-mode .ds-container .ds-card .static-page-content h6 {
  color: #e4e6eb;
}

/* tighten page-header spacing on static pages (no overlap with card) */
.ds-page-header {
  padding-bottom: 1rem;
}

/* static page: give the card breathing room below the page title */
.sg-static.ds-container {
  margin-top: 0.25rem;
  padding-bottom: 1rem;
}

/* static page footer links — match the login page footer exactly
   (scoped to internal pages only so the auth/login shell is untouched) */
.main-wrapper:not(.auth-wrapper) .fb-auth-footer {
  margin-top: auto !important;
  padding: 10px 16px !important;
}

body.static .main-wrapper,
body.contact .main-wrapper,
body.directory .main-wrapper,
body.support .main-wrapper {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100vh !important;
}

/* contact/support form card rendered on internal pages (with header bar):
   cozy, always centered, and correct card surface in both modes */
.main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-card {
  background: #ffffff;
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
  margin-top: 0.25rem;
}

.main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-title,
.main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-subtitle {
  color: #1c1e21;
}

body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-card {
  background: #242526;
  border-color: #3a3b3c;
}

body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-title,
body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-subtitle {
  color: #e4e6eb;
}

body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-input {
  color: #e4e6eb;
  background: #3a3b3c;
  border-color: #4e4f50;
}

body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-input::placeholder {
  color: #b0b3b8;
}

body.night-mode .main-wrapper:not(.auth-wrapper) .fb-auth-panel .auth-fb-input:focus {
  border-color: #2997ff;
  box-shadow: 0 0 0 3px rgba(41, 151, 255, 0.2);
  background: #3a3b3c;
}

/* ------------------------------------------------------------
   12. MOBILE REDESIGN (Figma FB-2023 reference) - phone experience
   Light theme by default; night-mode variants alongside.
   Scope: logged-in newsfeed on phones. Desktop untouched.
   ------------------------------------------------------------ */

@media (max-width: 991.98px) {

  /* Meta design system tokens from DESIGN.md */
  :root {
    --mob-bg: #f1f4f7;
    --mob-surface: #ffffff;
    --mob-ink: #1c1e21;
    --mob-ink-deep: #0a1317;
    --mob-body: #444950;
    --mob-muted: #5d6c7b;
    --mob-blue: #0064e0;
    --mob-fb-blue: #1876f2;
    --mob-soft: #f1f4f7;
    --mob-tool-ink: #4b4c4f;
    --mob-divider: #dee3e9;
    --mob-hairline: #ced0d4;
  }

  body.night-mode {
    --mob-bg: #18191a;
    --mob-surface: #242526;
    --mob-ink: #e4e6eb;
    --mob-ink-deep: #f5f6f7;
    --mob-body: #b0b3b8;
    --mob-muted: #8a8d91;
    --mob-blue: #2e89ff;
    --mob-fb-blue: #4599ff;
    --mob-soft: #3a3b3c;
    --mob-tool-ink: #d0d3da;
    --mob-divider: #3e4042;
    --mob-hairline: #3e4042;
  }

  /* page background turns to the soft gray sheet */
  body.logged-in {
    background: var(--mob-bg);
  }

  .main-wrapper {
    background: transparent;
  }

  /* single-row header: remove the in-header tab strip, round the bar */
  .fb-mnav {
    display: none !important;
  }

  .main-header {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  body.night-mode .main-header {
    border-bottom: 1px solid var(--mob-divider);
    border-radius: 0 !important;
  }

  /* shell gutters so pills sit on the gray sheet */
  .fb-shell {
    padding: 6px 12px 24px;
  }

  /* cards & posts get the large-radius pill look */
  .fb-shell .card,
  .fb-shell .post {
    border: 0;
    border-radius: 24px;
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  .fb-shell .card-header {
    background: var(--mob-surface);
    border-radius: 24px 24px 0 0 !important;
    color: var(--mob-ink);
  }

  body.night-mode .fb-shell .card,
  body.night-mode .fb-shell .post {
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  body.night-mode .fb-shell .card-header {
    background: var(--mob-surface);
  }

  /* ---------- stories: circular tiles ---------- */
  .fb-shell .stories-wrapper {
    overflow-x: auto;
    padding: 14px 16px 12px;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .fb-shell .stories-wrapper::-webkit-scrollbar {
    display: none;
  }

  .fb-shell #stories .add-story {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 76px;
    margin: 0;
    margin-inline-end: 14px;
    border-radius: 50%;
    background: var(--mob-blue);
  }

  .fb-shell #stories .add-story .img {
    border-radius: 50%;
  }

  .fb-shell #stories .add-story .add {
    top: auto;
    right: -2px;
    bottom: -2px;
    left: auto;
    transform: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    background: var(--mob-blue);
    border: 2px solid var(--mob-surface);
    color: #fff;
    fill: #fff;
  }

  .fb-shell .stories.sngine.carousel .story {
    width: 76px;
    margin: 0;
    margin-inline-end: 14px;
  }

  .fb-shell .stories.sngine.carousel .story>.item-link>.item-preview {
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
  }

  .fb-shell .stories.sngine .story>a>.item-preview>img {
    border-radius: 50%;
    border: 2px solid var(--mob-blue);
    padding: 2px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  body.night-mode .fb-shell .stories.sngine .story>a>.item-preview>img {
    border-color: var(--mob-blue);
  }

  .fb-shell .stories.carousel .story>.item-link>.info {
    margin-top: 2px;
    font-size: 10px;
    line-height: 1.2;
    color: var(--mob-ink);
    text-align: center;
  }

  /* ---------- post cards ---------- */
  .fb-shell .post {
    margin-bottom: 18px;
  }

  .fb-shell .post-header {
    padding: 16px 16px 0;
  }

  .fb-shell .post-header .post-avatar-picture:not(.small) {
    min-width: 50px;
    min-height: 50px;
    border-radius: 50%;
  }

  .fb-shell .post-header .post-avatar .online-dot {
    top: 42px;
  }

  .fb-shell .post-header .post-author {
    color: var(--mob-ink);
    font-size: 16px;
    line-height: 22px;
  }

  .fb-shell .post-header .post-title {
    color: var(--mob-ink);
  }

  .fb-shell .post-header .post-time,
  .fb-shell .post-header .post-time a {
    color: var(--mob-muted);
  }

  .fb-shell .post-text {
    color: var(--mob-body);
  }

  .fb-shell .post-stats {
    margin: 12px 16px 8px;
  }

  .fb-shell .post-actions {
    margin: 0 16px;
    padding: 6px 0;
    border-top: 1px solid var(--mob-divider);
  }

  body.night-mode .fb-shell .post-actions {
    border-color: var(--mob-divider);
  }
}

/* floating pill bottom nav - phone only */
@media (max-width: 767.98px) {

  /* single-row header accounting */
  body.logged-in {
    padding-top: 52px !important;
  }

  body.n_activated.logged-in,
  body.n_live.logged-in {
    padding-top: 102px !important;
  }

  /* room for the floating pill */
  body.logged-in {
    padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px));
  }

  .footer-bottom-bar {
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    height: 64px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.04);
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.74);
    -webkit-backdrop-filter: blur(12.5px);
    backdrop-filter: blur(12.5px);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
  }

  body.night-mode .footer-bottom-bar {
    background: rgba(36, 37, 38, 0.82);
    border-color: rgba(255, 255, 255, 0.06);
    box-shadow: 0 4px 25px rgba(0, 0, 0, 0.45);
  }

  .footer-bottom-bar .container {
    max-width: none;
    height: 64px;
    padding: 0 8px;
  }

  .footer-bottom-bar-links,
  .footer-bottom-bar-links>.link {
    height: 64px;
  }

  .footer-bottom-bar-links>.link>a,
  .footer-bottom-bar-links .link .user-menu,
  .footer-bottom-bar-links .link>a.dropdown {
    height: 64px;
    gap: 2px;
    border-radius: 0;
  }

  .footer-bottom-bar-links>.link>a:hover {
    border-radius: 50px;
    background: rgba(0, 0, 0, 0.04);
  }

  body.night-mode .footer-bottom-bar-links>.link>a:hover {
    background: rgba(255, 255, 255, 0.07);
  }

  .footer-bottom-bar-links>.link.active>a {
    border-radius: 50px;
    background: rgba(24, 119, 242, 0.1);
  }

  body.night-mode .footer-bottom-bar-links>.link.active>a {
    background: rgba(24, 119, 242, 0.18);
  }

  body.night-mode .footer-bottom-bar-links>.link.active>a,
  body.night-mode .footer-bottom-bar-links>.link.active>a>.title {
    color: var(--mob-blue);
  }

  .footer-bottom-bar-links>.link.active>a::before {
    height: 0;
  }

  .footer-bottom-bar-links .dropdown-widget {
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.16);
  }
}

/* Section 13 | Mobile redesign - secondary screens (profile, groups, events, market, people, notifications...) */
@media (max-width: 991.98px) {

  /* pill cards on the classic container pages */
  body.logged-in .container>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"]),
  body.logged-in .container-fluid>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"]),
  body.logged-in .ds-page-main .card:not([class*="bg-gradient-"]):not([class*="bg-"]) {
    --bs-card-border-radius: 24px;
    border: 0;
    border-radius: 24px;
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  body.night-mode.logged-in .container>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"]),
  body.night-mode.logged-in .container-fluid>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"]),
  body.night-mode.logged-in .ds-page-main .card:not([class*="bg-gradient-"]):not([class*="bg-"]) {
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  body.logged-in .container>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"])>.card-header:first-child,
  body.logged-in .container-fluid>.row .card:not([class*="bg-gradient-"]):not([class*="bg-"])>.card-header:first-child,
  body.logged-in .ds-page-main .card:not([class*="bg-gradient-"]):not([class*="bg-"])>.card-header:first-child {
    border-radius: 24px 24px 0 0;
  }

  /* timeline posts outside the fb-shell (profile, group, page & event walls) */
  body.logged-in .post {
    border: 0;
    border-radius: 24px;
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  body.night-mode.logged-in .post {
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  body.logged-in .post-header {
    background: transparent;
  }

  body.logged-in .post-header .post-avatar .post-avatar-picture {
    border-radius: 50%;
  }

  body.logged-in .post-header .post-author {
    color: var(--mob-ink);
  }

  body.logged-in .post-time,
  body.logged-in .post-time a {
    color: var(--mob-muted);
  }

  body.logged-in .post-text {
    color: var(--mob-body);
  }

  /* profile pill: header & cover share the 24px bottom radius */
  body.logged-in .profile-header {
    border-radius: 0 0 24px 24px;
  }

  body.logged-in .profile-cover-wrapper {
    border-radius: 0 0 24px 24px;
  }

  /* ds-page (market / groups / people...) main column breathing room */
  body.logged-in .ds-page-main {
    padding: 0 16px 8px;
  }
}

/* Section 14 | Mobile redesign - profile header (Figma-2023 frame: full-bleed cover + pill) */
@media (max-width: 991.98px) {

  /* the whole header becomes full-bleed flush to both left and right edges */
  body.logged-in .profile-header,
  .profile-header {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: var(--mob-surface);
    border-radius: 0 !important;
    margin-bottom: 4px;
  }

  body.night-mode.logged-in .profile-header {
    background: var(--mob-surface);
  }

  /* cover: full-bleed, 200px tall (Figma ratio), square edges */
  body.logged-in .profile-cover-wrapper {
    height: 200px;
    border-radius: 0;
  }

  body.night-mode.logged-in .profile-cover-wrapper {
    border-radius: 0;
  }

  /* avatar: a bigger circle straddling the cover bottom edge */
  body.logged-in .profile-avatar-wrapper:not(.static) {
    top: 140px;
    padding: 4px;
    background: var(--mob-surface);
  }

  body.night-mode.logged-in .profile-avatar-wrapper:not(.static) {
    background: var(--mob-surface);
  }

  body.logged-in .profile-avatar-wrapper:not(.static) img {
    width: 120px;
    height: 120px;
  }

  /* name: strong ink on the pill */
  body.logged-in .profile-name-wrapper {
    background: var(--mob-surface);
    padding-top: 14px;
    padding-bottom: 8px;
    font-size: 1.5em;
    font-weight: 700;
  }

  body.logged-in .profile-name-wrapper a {
    color: var(--mob-ink) !important;
  }

  body.night-mode.logged-in .profile-name-wrapper {
    background: var(--mob-surface);
  }

  /* action buttons: compact rounded row */
  body.logged-in .profile-buttons-wrapper {
    background: var(--mob-surface);
    padding-bottom: 16px;
  }

  body.night-mode.logged-in .profile-buttons-wrapper {
    background: var(--mob-surface);
  }

  body.logged-in .profile-buttons-wrapper .btn {
    border-radius: 24px;
    padding: 8px 16px;
    font-size: 13px;
  }

  body.logged-in .profile-buttons-wrapper .btn-icon {
    width: 38px;
    height: 38px;
    padding: 0;
  }

  /* tabs: the Figma-2023 profile tab bar (soft pill highlight on the active tab) */
  body.logged-in .profile-tabs-wrapper {
    background: var(--mob-surface);
    border-radius: 24px;
    margin-bottom: 20px;
    padding: 4px;
  }

  body.night-mode.logged-in .profile-tabs-wrapper {
    background: var(--mob-surface);
  }

  body.logged-in .profile-tabs-wrapper a {
    border-radius: 12px;
    padding: 10px 12px;
    color: var(--mob-muted);
  }

  body.logged-in .profile-tabs-wrapper a .main-icon {
    color: var(--mob-muted);
  }

  body.logged-in .profile-tabs-wrapper a:hover {
    background: var(--mob-soft);
    color: var(--mob-ink);
  }

  body.logged-in .profile-tabs-wrapper a.active,
  body.night-mode.logged-in .profile-tabs-wrapper a.active {
    background: rgba(24, 119, 242, 0.12);
    border-bottom: 0;
    color: var(--mob-blue);
    font-weight: 700;
  }

  body.logged-in .profile-tabs-wrapper a.active .main-icon,
  body.night-mode.logged-in .profile-tabs-wrapper a.active .main-icon {
    color: var(--mob-blue);
  }
}

/* Section 15 | Mobile redesign - discovery cards & list feeds */
@media (max-width: 991.98px) {

  /* ui-box discovery cards (people / groups / events / pages / search / suggestions) */
  body.logged-in .ds-page-main .ui-box,
  body.logged-in .container>.row .ui-box,
  body.logged-in .fb-shell .ui-box {
    border: 0;
    border-radius: 24px;
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  }

  body.night-mode.logged-in .ds-page-main .ui-box,
  body.night-mode.logged-in .container>.row .ui-box,
  body.night-mode.logged-in .fb-shell .ui-box {
    background: var(--mob-surface);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  }

  body.logged-in .ds-page-main .ui-box.darker,
  body.logged-in .container>.row .ui-box.darker,
  body.logged-in .fb-shell .ui-box.darker {
    background: var(--mob-soft);
  }

  body.night-mode.logged-in .ds-page-main .ui-box.darker,
  body.night-mode.logged-in .container>.row .ui-box.darker,
  body.night-mode.logged-in .fb-shell .ui-box.darker {
    background: var(--mob-surface);
  }

  body.logged-in .ui-box .img {
    background: var(--mob-surface);
  }

  body.night-mode.logged-in .ui-box .img {
    background: var(--mob-surface);
  }

  body.logged-in .ui-box img {
    width: 96px;
    height: 96px;
  }

  body.logged-in .ui-box .h6,
  body.logged-in .ui-box a.h6,
  body.logged-in .ui-box span.name {
    color: var(--mob-ink);
    font-weight: 700;
  }

  body.logged-in .ui-box .img+div,
  body.logged-in .ui-box .img+div a {
    color: var(--mob-ink);
  }

  body.logged-in .ui-box .img~div div {
    color: var(--mob-muted);
    font-size: 13px;
  }

  body.logged-in .ui-box .btn {
    border-radius: 20px;
  }

  /* list feeds (friend rows, requests, followers, notifications...) */
  body.logged-in .feeds-item {
    border-bottom-color: var(--mob-divider);
  }

  body.logged-in .feeds-item.unread {
    background: var(--mob-soft);
    border-radius: 16px;
  }

  body.logged-in a.data-container:hover,
  body.logged-in .data-container.clickable:hover {
    background: var(--mob-soft);
  }

  body.night-mode.logged-in a.data-container:hover,
  body.night-mode.logged-in .data-container.clickable:hover {
    background: var(--mob-soft);
  }

  body.logged-in .data-avatar img {
    width: 44px;
    height: 44px;
  }

  body.logged-in .data-container.small .data-avatar img {
    width: 34px;
    height: 34px;
  }

  body.logged-in .data-content .name a {
    color: var(--mob-ink);
    font-weight: 700;
  }

  body.logged-in .feeds-action-item.unread,
  body.logged-in .feeds-action-item:hover {
    border-radius: 16px;
    background: var(--mob-soft);
  }
}

/* Section 16 | Mobile redesign - navigation bars (src Header.tsx reference)
   Solid facebook-style bottom tab bar + round top-row action buttons. Phone only. */
@media (max-width: 767.98px) {

  /* top row: round action buttons (src: w-9 h-9 rounded-full bg-secondary/80) */
  body.logged-in .fb-hright .navbar-wrapper>ul>li>a {
    background: rgba(0, 0, 0, 0.05);
  }

  body.night-mode.logged-in .fb-hright .navbar-wrapper>ul>li>a {
    background: rgba(255, 255, 255, 0.1);
  }

  body.logged-in .fb-hright .navbar-wrapper .counter,
  body.night-mode.logged-in .fb-hright .navbar-wrapper .counter {
    top: 3px;
    right: 2px;
    border-color: var(--mob-surface);
  }

  /* bottom bar: solid facebook tab bar (52px, icon + label, full width) */
  body.logged-in .footer-bottom-bar {
    right: 0;
    left: 0;
    bottom: 0;
    height: calc(52px + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    border: 0;
    border-top: 1px solid var(--mob-divider);
    border-radius: 0;
    background: var(--mob-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.04);
  }

  body.night-mode.logged-in .footer-bottom-bar {
    background: var(--mob-surface);
    border-top-color: var(--mob-divider);
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3);
  }

  body.logged-in .footer-bottom-bar .container {
    max-width: none;
    height: 52px;
    padding: 0 8px;
  }

  body.logged-in .footer-bottom-bar-links,
  body.logged-in .footer-bottom-bar-links>.link {
    height: 52px;
  }

  body.logged-in .footer-bottom-bar-links {
    gap: 0;
  }

  body.logged-in .footer-bottom-bar-links>.link>a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1px;
    height: 52px;
    padding: 0;
    margin: 0;
    border-radius: 0;
    color: var(--mob-muted);
    font-weight: 500;
  }

  body.night-mode.logged-in .footer-bottom-bar-links>.link>a {
    color: var(--mob-muted);
  }

  body.logged-in .footer-bottom-bar-links>.link>a:hover {
    background: transparent;
  }

  body.logged-in .footer-bottom-bar-links>.link>a>.title,
  body.night-mode.logged-in .footer-bottom-bar-links>.link>a>.title {
    color: inherit;
    font-size: 10px;
    line-height: 14px;
    font-weight: 500;
  }

  /* active tab: blue icon + blue label (no pill, no underline) */
  body.logged-in .footer-bottom-bar-links>.link.active>a,
  body.night-mode.logged-in .footer-bottom-bar-links>.link.active>a {
    color: var(--mob-blue);
    background: transparent;
  }

  body.logged-in .footer-bottom-bar-links>.link.active>a>.title,
  body.night-mode.logged-in .footer-bottom-bar-links>.link.active>a>.title {
    color: var(--mob-blue);
    font-weight: 700;
  }

  body.logged-in .footer-bottom-bar-links>.link.active>a .svg-container.header-icon,
  body.night-mode.logged-in .footer-bottom-bar-links>.link.active>a .svg-container.header-icon {
    color: var(--mob-blue);
  }

  body.logged-in .footer-bottom-bar-links>.link.active>a::before {
    height: 0;
  }

  /* notification badge on the bottom tab */
  body.logged-in .footer-bottom-bar-links .link>a .counter,
  body.night-mode.logged-in .footer-bottom-bar-links .link>a .counter {
    top: 3px;
    right: calc(50% - 28px);
    border-color: var(--mob-surface);
  }

  /* room for the solid bar instead of the floating pill */
  body.logged-in {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
}

/* ------------------------------------------------------------------ */
/* 17. section - phone navigation: NO bottom bar / top nav row +       */
/*     profile picture -> all-pages sheet  (fb-2023 / src Header)      */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

  /* remove the bottom bar completely (src has no bottom navigation) */
  body.logged-in .footer-bottom-bar {
    display: none !important;
  }

  body.logged-in {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  /* two-row header: top row (52px) + nav row (44px) = 96px */
  body.logged-in {
    padding-top: 96px !important;
  }

  body.n_activated.logged-in,
  body.n_live.logged-in {
    padding-top: 146px !important;
  }

  /* the hamburger is replaced by the profile-picture menu (bootstrap d-block is !important) */
  body.logged-in .fb-hleft .menu-icon {
    display: none !important;
  }

  /* ---- top nav row (src facebook-style tab strip) ---- */
  body.logged-in .fb-mnav {
    display: flex !important;
    height: 44px;
    min-height: 44px;
    align-items: stretch;
    padding: 0 8px;
    border-top: 1px solid var(--mob-divider);
  }

  body.logged-in .fb-mnav>a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 2px;
    border: 0;
    border-radius: 10px;
    color: var(--mob-muted);
    transition: background 0.15s ease, color 0.15s ease;
  }

  body.logged-in .fb-mnav>a:hover,
  body.night-mode.logged-in .fb-mnav>a:hover {
    background: var(--mob-soft);
  }

  body.logged-in .fb-mnav>a:hover .svg-container.header-icon,
  body.night-mode.logged-in .fb-mnav>a:hover .svg-container.header-icon {
    color: var(--mob-ink);
  }

  body.logged-in .fb-mnav>a.active,
  body.night-mode.logged-in .fb-mnav>a.active {
    background: rgba(24, 119, 242, 0.12);
    border: 0;
    color: var(--mob-blue);
  }

  body.logged-in .fb-mnav>a.active .svg-container.header-icon,
  body.night-mode.logged-in .fb-mnav>a.active .svg-container.header-icon {
    color: var(--mob-blue);
  }

  body.logged-in .fb-mnav>a .svg-container.header-icon,
  body.night-mode.logged-in .fb-mnav>a .svg-container.header-icon {
    color: inherit;
  }

  /* ---- profile picture -> all-pages sheet ---- */
  body.logged-in .fb-hright .navbar-wrapper>ul>li>a.fb-mob-avatar {
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border-radius: 50%;
  }

  body.logged-in .fb-mob-avatar img {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--mob-divider);
  }

  /* the all-pages menu panel itself is styled in section 18 (full-screen) */
}

/* ------------------------------------------------------------------ */
/* 18. section - mobile Menu = src MobileMenu (full-screen, grid)      */
/* ------------------------------------------------------------------ */
@media (max-width: 767.98px) {

  /* full-screen menu panel (custom toggle - no bootstrap dropdown/popper) */
  body.logged-in .fb-mob-allpages {
    display: none;
  }

  body.logged-in .fb-mob-allpages.open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 10000 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-width: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: var(--mob-surface) !important;
    box-shadow: none !important;
  }

  body.logged-in .fb-mob-allpages::before {
    display: none;
  }

  body.mob-menu-open {
    overflow: hidden;
  }

  /* ---- top quick nav (mirrors the top nav row) ---- */
  body.logged-in .fb-mob-nav {
    display: flex;
    align-items: stretch;
    flex: 0 0 56px;
    background: var(--mob-surface);
    border-bottom: 1px solid var(--mob-divider);
    position: relative;
    z-index: 2;
  }

  body.logged-in .fb-mob-nav>a {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0;
    color: var(--mob-muted);
    transition: color 0.15s ease;
  }

  body.logged-in .fb-mob-nav>a .svg-container.header-icon,
  body.night-mode.logged-in .fb-mob-nav>a .svg-container.header-icon {
    color: var(--mob-muted);
  }

  body.logged-in .fb-mob-nav>a.active .svg-container.header-icon,
  body.night-mode.logged-in .fb-mob-nav>a.active .svg-container.header-icon {
    color: var(--mob-blue);
  }

  body.logged-in .fb-mob-nav>a.active::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 0;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--mob-blue);
  }

  body.logged-in .fb-mob-nav .fb-mob-nav-icon {
    position: relative;
    display: flex;
  }

  body.logged-in .fb-mob-nav .counter,
  body.night-mode.logged-in .fb-mob-nav .counter {
    position: absolute;
    top: -5px;
    inset-inline-end: -9px;
    border: 2px solid var(--mob-surface);
  }

  /* ---- head: close + title + actions ---- */
  body.logged-in .fb-mob-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 10px 16px;
    background: var(--mob-surface);
    border-bottom: 1px solid var(--mob-divider);
    position: relative;
    z-index: 2;
  }

  body.logged-in .fb-mob-title {
    flex: 1;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--mob-ink);
  }

  body.logged-in .fb-mob-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.logged-in .fb-mob-round {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: var(--mob-soft);
    color: var(--mob-ink);
    line-height: 0;
  }

  body.logged-in .fb-mob-round .svg-container.header-icon,
  body.night-mode.logged-in .fb-mob-round .svg-container.header-icon {
    color: var(--mob-ink);
  }

  body.logged-in .fb-mob-round:active {
    transform: scale(0.92);
  }

  /* ---- menu search ---- */
  body.logged-in .fb-mob-search {
    position: relative;
    flex: 0 0 auto;
    padding: 12px 16px 4px;
    background: var(--mob-surface);
    z-index: 1;
  }

  body.logged-in .fb-mob-search-icon {
    position: absolute;
    top: 24px;
    inset-inline-start: 28px;
    pointer-events: none;
  }

  body.logged-in .fb-mob-search-icon .svg-container.header-icon,
  body.night-mode.logged-in .fb-mob-search-icon .svg-container.header-icon {
    color: var(--mob-muted);
  }

  body.logged-in .fb-mob-search-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    padding-inline-start: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--mob-soft);
    color: var(--mob-ink);
    font-size: 15px;
    outline: none;
    appearance: none;
  }

  body.logged-in .fb-mob-search-input::placeholder {
    color: var(--mob-muted);
  }

  /* ---- the all-pages list -> src grid + profile card + settings rows ---- */
  body.logged-in .fb-mob-allpages .fb-leftnav {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    align-content: start;
    margin: 0;
    padding: 8px 10px calc(16px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.logged-in .fb-mob-allpages .fb-navsub {
    display: none;
  }

  /* section titles (Main / Social / ...) */
  body.logged-in .fb-mob-allpages .fb-navtitle {
    grid-column: 1 / -1;
    padding: 10px 4px 1px;
    margin: 0;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mob-muted);
    letter-spacing: 0.2px;
    text-transform: none;
  }

  body.logged-in .fb-mob-allpages .fb-navtitle:first-of-type {
    padding-top: 2px;
  }

  /* profile card */
  body.logged-in .fb-mob-allpages .fb-navlink.fb-profile {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 2px 0 4px;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--mob-soft);
    border: 1px solid var(--mob-divider);
  }

  body.logged-in .fb-mob-allpages .fb-navlink.fb-profile .fb-navicon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 50%;
    background: transparent;
  }

  body.logged-in .fb-mob-allpages .fb-navlink.fb-profile .fb-navicon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
  }

  body.logged-in .fb-mob-allpages .fb-navlink.fb-profile .fb-navlabel {
    font-size: 14px;
    font-weight: 700;
    color: var(--mob-ink);
  }

  body.logged-in .fb-mob-allpages .fb-navlink.fb-profile::after {
    content: "\203A";
    margin-inline-start: auto;
    font-size: 18px;
    font-weight: 400;
    color: var(--mob-muted);
  }

  /* page tiles (compact Meta design standard) */
  body.logged-in .fb-mob-allpages .fb-navlink:not(.fb-profile) {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 16px;
    background: var(--mob-surface);
    border: 1px solid var(--mob-divider);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: transform 0.15s ease, background 0.15s ease;
  }

  body.night-mode.logged-in .fb-mob-allpages .fb-navlink:not(.fb-profile) {
    background: var(--mob-soft);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  body.logged-in .fb-mob-allpages .fb-navlink:not(.fb-profile):active {
    transform: scale(0.97);
  }

  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 10px;
    background: rgba(0, 100, 224, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  body.night-mode.logged-in .fb-mob-allpages .fb-navlink .fb-navicon {
    background: rgba(46, 137, 255, 0.15);
  }

  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon svg,
  body.night-mode.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon,
  body.night-mode.logged-in .fb-mob-allpages .fb-navlink .fb-navicon svg {
    color: var(--mob-blue);
  }

  /* ensure the events & support icons stay visible despite the global
     .svg-container svg{width:inherit} and .header-icon * {fill:#111}
     rules shipped by style.min.css */
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon svg,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon svg {
    display: block;
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
  }

  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon *,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon svg path,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon svg circle,
  body.logged-in .fb-mob-allpages .fb-navlink .fb-navicon .svg-container.header-icon svg rect {
    fill: currentColor;
  }

  body.logged-in .fb-mob-allpages .fb-navlink .fb-navlabel {
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.14px;
    color: var(--mob-ink);
  }

  /* active tile */
  body.logged-in .fb-mob-allpages .fb-navlink.active {
    background: rgba(0, 100, 224, 0.08);
    border-color: rgba(0, 100, 224, 0.35);
  }

  body.logged-in .fb-mob-allpages .fb-navlink.active .fb-navlabel,
  body.night-mode.logged-in .fb-mob-allpages .fb-navlink.active .fb-navlabel {
    color: var(--mob-blue);
  }

  /* settings / logout rows (below the navsub spacer) */
  body.logged-in .fb-mob-allpages .fb-navsub~.fb-navlink {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: 12px;
    background: var(--mob-surface);
    border: 1px solid var(--mob-divider);
  }

  body.logged-in .fb-mob-allpages .fb-navsub~.fb-navlink .fb-navicon,
  body.logged-in .fb-mob-allpages .fb-navsub~.fb-navlink .fb-navicon svg,
  body.night-mode.logged-in .fb-mob-allpages .fb-navsub~.fb-navlink .fb-navicon,
  body.night-mode.logged-in .fb-mob-allpages .fb-navsub~.fb-navlink .fb-navicon svg {
    color: var(--mob-ink);
    background: transparent;
  }

  /* logout row is red */
  body.logged-in .fb-mob-allpages .fb-navlink[href*="signout"] {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 2px 0 0 !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
    background: rgba(228, 30, 63, 0.08) !important;
    border: 1px solid rgba(228, 30, 63, 0.18) !important;
  }

  body.logged-in .fb-mob-allpages .fb-navlink[href*="signout"] .fb-navlabel,
  body.logged-in .fb-mob-allpages .fb-navlink[href*="signout"] .fb-navicon,
  body.logged-in .fb-mob-allpages .fb-navlink[href*="signout"] .fb-navicon svg {
    color: #e41e3f !important;
  }

  /* Account & System full-width settings rows */
  body.logged-in .fb-mob-allpages .fb-account-navlink {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 9px 12px !important;
    border-radius: 12px !important;
    background: var(--mob-surface) !important;
    border: 1px solid var(--mob-divider) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.15s ease, background 0.15s ease !important;
  }

  body.night-mode.logged-in .fb-mob-allpages .fb-account-navlink {
    background: var(--mob-soft) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  }

  body.logged-in .fb-mob-allpages .fb-account-navlink:active {
    transform: scale(0.98) !important;
  }

  body.logged-in .fb-mob-allpages .fb-account-navlink .fb-navicon {
    width: 32px !important;
    height: 32px !important;
    flex: 0 0 32px !important;
    border-radius: 50% !important;
    background: rgba(0, 0, 0, 0.04) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.night-mode.logged-in .fb-mob-allpages .fb-account-navlink .fb-navicon {
    background: rgba(255, 255, 255, 0.08) !important;
  }

  body.logged-in .fb-mob-allpages .fb-account-navlink .fb-navicon .svg-container.header-icon,
  body.logged-in .fb-mob-allpages .fb-account-navlink .fb-navicon svg {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
  }

  body.logged-in .fb-mob-allpages .fb-account-navlink .fb-navlabel {
    flex: 1 !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    letter-spacing: -0.14px !important;
    color: var(--mob-ink) !important;
  }

  body.logged-in .fb-mob-allpages .fb-account-navlink::after {
    content: "\203A";
    margin-inline-start: auto;
    font-size: 18px;
    font-weight: 400;
    color: var(--mob-muted);
  }

  /* See more / See less button in mobile menu */
  body.logged-in .fb-mob-allpages .fb-more-toggle {
    grid-column: 1 / -1;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 4px 0 !important;
    padding: 10px 14px !important;
    border-radius: 12px !important;
    background: var(--mob-soft) !important;
    border: 1px solid var(--mob-divider) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
    min-height: 48px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
  }

  body.logged-in .fb-mob-allpages .fb-more-toggle .fb-more-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    background: var(--mob-surface) !important;
    border: 1px solid var(--mob-divider) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.logged-in .fb-mob-allpages .fb-more-toggle .fb-navlabel {
    flex: 1 !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    color: var(--mob-ink) !important;
    text-align: start !important;
  }

  body.logged-in .fb-mob-allpages .fb-more-toggle .fb-more-label-less {
    display: none !important;
  }

  body.logged-in .fb-mob-allpages .fb-more-toggle[aria-expanded="true"] .fb-more-label-more {
    display: none !important;
  }

  body.logged-in .fb-mob-allpages .fb-more-toggle[aria-expanded="true"] .fb-more-label-less {
    display: block !important;
  }

  body.logged-in .fb-mob-allpages #fb-sidebar-more {
    grid-column: 1 / -1;
    width: 100%;
  }

  body.logged-in .fb-mob-allpages #fb-sidebar-more.collapse:not(.show) {
    display: none !important;
  }

  body.logged-in .fb-mob-allpages #fb-sidebar-more.collapse.show,
  body.logged-in .fb-mob-allpages #fb-sidebar-more.collapsing {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    width: 100% !important;
  }
}

/* =========================================================================
/* =========================================================================
   Stories Redesign (matching facebook-clone-master)
   ========================================================================= */
.stories-wrapper {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
}

/* =========================================================================
   Facebook Stories & Create Story Card (Pixel-Perfect 1:1 Design)
   ========================================================================= */
.stories-wrapper {
  margin-bottom: 16px !important;
  position: relative !important;
  width: 100% !important;
}

#stories {
  display: flex !important;
  overflow-x: auto !important;
  gap: 8px !important;
  padding: 4px 2px 8px !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  scroll-behavior: smooth !important;
  -webkit-overflow-scrolling: touch !important;
}

#stories::-webkit-scrollbar {
  display: none !important;
}

/* Base Card for both Create Story & Friends Stories */
#stories .story,
#stories .add-story {
  width: 135px !important;
  min-width: 135px !important;
  max-width: 135px !important;
  height: 230px !important;
  border-radius: 10px !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  flex-shrink: 0 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
  margin: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #ffffff !important;
  user-select: none !important;
  display: flex !important;
  flex-direction: column !important;
}

@media (max-width: 768px) {

  #stories .story,
  #stories .add-story {
    width: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    height: 190px !important;
    border-radius: 10px !important;
  }
}

#stories .story:hover,
#stories .add-story:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Night Mode for Stories */
body.night-mode #stories .story,
body.night-mode #stories .add-story {
  background-color: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) !important;
}

body.night-mode #stories .story:hover,
body.night-mode #stories .add-story:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6) !important;
}

/* --------------------------------------------------
   Create Story Card Specifics
   -------------------------------------------------- */
#stories .add-story {
  background: #ffffff !important;
}

body.night-mode #stories .add-story {
  background: #242526 !important;
}

/* Image Wrapper: covers ~74% of card */
#stories .add-story .add-story-img-wrap,
#stories .add-story>.add-story-img {
  width: 100% !important;
  height: 170px !important;
  position: relative !important;
  overflow: hidden !important;
  background-color: #e4e6eb !important;
  border-radius: 9px 9px 0 0 !important;
}

@media (max-width: 768px) {

  #stories .add-story .add-story-img-wrap,
  #stories .add-story>.add-story-img {
    height: 138px !important;
  }
}

body.night-mode #stories .add-story .add-story-img-wrap,
body.night-mode #stories .add-story>.add-story-img {
  background-color: #3a3b3c !important;
}

#stories .add-story-img {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center top !important;
  background-repeat: no-repeat !important;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1), filter 0.35s ease !important;
}

#stories .add-story-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: rgba(0, 0, 0, 0) !important;
  transition: background 0.25s ease !important;
  pointer-events: none !important;
}

#stories .add-story:hover .add-story-img {
  transform: scale(1.06) !important;
}

#stories .add-story:hover .add-story-overlay {
  background: rgba(0, 0, 0, 0.08) !important;
}

/* Circular Blue Plus Button: centered on the dividing line */
#stories .add-story-btn {
  position: absolute !important;
  top: 170px !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background-color: #0866ff !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
  z-index: 10 !important;
  font-size: 15px !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), background-color 0.2s ease !important;
}

@media (max-width: 768px) {
  #stories .add-story-btn {
    top: 138px !important;
    width: 34px !important;
    height: 34px !important;
    font-size: 13px !important;
    border-width: 3px !important;
  }
}

body.night-mode #stories .add-story-btn {
  border-color: #242526 !important;
}

#stories .add-story:hover .add-story-btn {
  background-color: #0055d4 !important;
  transform: translate(-50%, -50%) scale(1.08) !important;
}

/* Story Bottom Text Label */
#stories .add-story-text {
  flex: 1 !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: center !important;
  padding: 0 8px 12px !important;
  background: transparent !important;
  text-align: center !important;
  pointer-events: none !important;
}

@media (max-width: 768px) {
  #stories .add-story-text {
    padding: 0 6px 8px !important;
  }
}

#stories .add-story-text p,
#stories .add-story-text span {
  margin: 0 !important;
  font-family: var(--fb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  color: #050505 !important;
  letter-spacing: -0.1px !important;
  word-break: break-word !important;
}

@media (max-width: 768px) {

  #stories .add-story-text p,
  #stories .add-story-text span {
    font-size: 11px !important;
  }
}

body.night-mode #stories .add-story-text p,
body.night-mode #stories .add-story-text span {
  color: #e4e6eb !important;
}

/* --------------------------------------------------
   Regular Stories (User Friends Stories in Zuck)
   -------------------------------------------------- */
#stories .story>a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  text-decoration: none !important;
}

#stories .story .item-preview {
  width: 100% !important;
  height: 100% !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  overflow: hidden !important;
}

#stories .story .item-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.35s cubic-bezier(0.2, 0, 0, 1) !important;
  border-radius: 0 !important;
  border: none !important;
  padding: 0 !important;
}

#stories .story:hover .item-preview img {
  transform: scale(1.05) !important;
}

/* Gradient overlay for text readability */
#stories .story>a::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 30%, transparent 60%, rgba(0, 0, 0, 0.75) 100%) !important;
  pointer-events: none !important;
  z-index: 2 !important;
  border-radius: 10px !important;
}

/* User Circular Avatar Badge */
#stories .story .story-avatar,
#stories .story .item-avatar {
  position: absolute !important;
  top: 12px !important;
  left: 12px !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 4px solid #0866ff !important;
  z-index: 5 !important;
  overflow: hidden !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35) !important;
  background-color: #18191a !important;
}

html[dir="RTL"] #stories .story .story-avatar,
html[dir="RTL"] #stories .story .item-avatar {
  left: auto !important;
  right: 12px !important;
}

#stories .story.seen .story-avatar,
#stories .story.seen .item-avatar {
  border-color: rgba(255, 255, 255, 0.6) !important;
}

/* User Name Text on Story */
#stories .story .info {
  position: absolute !important;
  bottom: 12px !important;
  left: 10px !important;
  right: 10px !important;
  z-index: 5 !important;
  text-align: start !important;
}

html[dir="RTL"] #stories .story .info {
  text-align: right !important;
}

#stories .story .info .name {
  color: #ffffff !important;
  font-family: var(--fb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7) !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: normal !important;
}

/* =========================================================================
   Facebook Create Story Modal (1:1 Meta Design)
   ========================================================================= */
.modal-content:has(.story-publisher-form) {
  border-radius: 12px !important;
  border: none !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
}

body.night-mode .modal-content:has(.story-publisher-form) {
  background-color: #242526 !important;
  border: 1px solid #3e4042 !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.5) !important;
}

.story-modal-icon-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(8, 102, 255, 0.1), rgba(0, 198, 255, 0.15));
}

.story-author-row {
  padding-bottom: 2px;
}

.story-audience-badge {
  background: var(--fb-sec-bg, #e4e6eb);
  color: var(--fb-muted, #65676b);
  font-size: 12px;
  font-weight: 600;
  cursor: default;
}

body.night-mode .story-audience-badge {
  background: #3a3b3c !important;
  color: #b0b3b8 !important;
}

.story-ads-card {
  background: linear-gradient(135deg, rgba(8, 102, 255, 0.04), rgba(8, 102, 255, 0.08));
  border: 1px solid rgba(8, 102, 255, 0.18);
  border-radius: 12px;
  padding: 12px 16px;
  transition: all 0.2s ease;
}

body.night-mode .story-ads-card {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
}

.story-ads-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0866ff, #00c6ff);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(8, 102, 255, 0.3);
}

.story-ads-title {
  font-size: 14px;
  color: var(--fb-text, #050505);
  line-height: 1.2;
}

.story-ads-desc {
  font-size: 12px;
  color: var(--fb-muted, #65676b);
  margin-top: 2px;
}

body.night-mode .story-ads-title {
  color: #e4e6eb !important;
}

body.night-mode .story-ads-desc {
  color: #b0b3b8 !important;
}

.story-message-input {
  border-radius: 10px !important;
  border: 1px solid #ced0d4 !important;
  background-color: #ffffff !important;
  font-family: var(--fb-font-family) !important;
  font-size: 15px !important;
  color: #050505 !important;
  resize: vertical !important;
  min-height: 80px !important;
  padding: 12px 14px !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

.story-message-input:focus {
  border-color: var(--fb-blue, #0866ff) !important;
  box-shadow: 0 0 0 2px rgba(8, 102, 255, 0.2) !important;
}

body.night-mode .story-message-input {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* Upload cards */
.story-media-label {
  font-size: 13px;
  color: var(--fb-muted, #65676b);
}

body.night-mode .story-media-label {
  color: #b0b3b8 !important;
}

.story-upload-card {
  border-radius: 12px;
  background: var(--fb-sec-bg, #f0f2f5);
  border: 2px dashed #ced0d4;
  transition: all 0.2s ease;
  overflow: hidden;
  position: relative;
}

.story-upload-card:hover {
  border-color: var(--fb-blue, #0866ff);
  background: rgba(8, 102, 255, 0.04);
}

body.night-mode .story-upload-card {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
}

body.night-mode .story-upload-card:hover {
  border-color: var(--fb-blue, #0866ff) !important;
  background: rgba(8, 102, 255, 0.1) !important;
}

.story-dropzone-item {
  width: 100% !important;
  min-height: 110px !important;
  padding: 16px 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  position: relative !important;
  float: none !important;
  margin: 0 !important;
  border: none !important;
  background: transparent !important;
}

.story-dropzone-item .dropzone-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

.dropzone-icon-box {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  margin-bottom: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.dropzone-icon-box.photo-gradient {
  background: linear-gradient(135deg, #45bd62, #10962d);
}

.dropzone-icon-box.video-gradient {
  background: linear-gradient(135deg, #f02849, #d0021b);
}

.dropzone-heading {
  font-weight: 700;
  font-size: 14px;
  color: var(--fb-text, #050505);
  line-height: 1.2;
}

.dropzone-hint {
  font-size: 11px;
  color: var(--fb-muted, #65676b);
  margin-top: 2px;
}

body.night-mode .dropzone-heading {
  color: #e4e6eb !important;
}

body.night-mode .dropzone-hint {
  color: #b0b3b8 !important;
}

/* Hide native browser uploader controls and overlay full clickable area */
.story-dropzone-item .x-uploader {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  z-index: 10 !important;
  cursor: pointer !important;
}

.story-dropzone-item .x-uploader input[type="file"] {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
  font-size: 100px !important;
  z-index: 12 !important;
  display: block !important;
}

.story-dropzone-item i.js_x-uploader {
  display: none !important;
}

/* Attachments preview gallery */
.story-attachments-ul {
  list-style: none !important;
  padding: 6px !important;
  margin: 0 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  width: 100% !important;
}

.story-attachments-ul li.item {
  width: 90px !important;
  height: 120px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background-color: #000 !important;
  float: none !important;
  margin: 0 !important;
}

.story-attachments-ul li.item img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.story-attachments-ul li.item button.btn-close {
  position: absolute !important;
  top: 6px !important;
  right: 6px !important;
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: rgba(0, 0, 0, 0.6) !important;
  background-size: 10px !important;
  filter: invert(1) grayscale(100%) brightness(200%) !important;
  opacity: 0.9 !important;
  z-index: 15 !important;
}

.story-attachments-ul li.item button.btn-close:hover {
  opacity: 1 !important;
  transform: scale(1.1) !important;
}

.story-attachments-ul li.loading {
  width: 90px !important;
  height: 120px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: var(--fb-sec-bg, #e4e6eb) !important;
  float: none !important;
  margin: 0 !important;
}

/* =========================================================================
   Post Action Icons: Outlined in Day Mode, Solid in Night Mode
   ========================================================================= */
.post-actions .action-icon.fa-thumbs-up,
.post-actions .action-icon.fa-comment,
.reel-action-btn .white-icon.fa-thumbs-up,
.reel-action-btn .white-icon.fa-comment {
  font-weight: 400 !important;
  /* far (Regular/Outline) */
}

body.night-mode .post-actions .action-icon.fa-thumbs-up,
body.night-mode .post-actions .action-icon.fa-comment,
body.night-mode .reel-action-btn .white-icon.fa-thumbs-up,
body.night-mode .reel-action-btn .white-icon.fa-comment {
  font-weight: 900 !important;
  /* fas (Solid) */
}

/* =========================================================================
   Edge-to-Edge Posts on Mobile v2
   ========================================================================= */
@media (max-width: 576px) {

  /* Remove padding from the main wrapper so everything bleeds to edge */
  .sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Force posts to be square and stretch fully */
  .post {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
}

/* =========================================================================
   System Font Stack (Facebook Clone Style)
   ========================================================================= */
:root {
  --body-font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

body {
  font-family: var(--body-font-family) !important;
}

/* =========================================================================
   Modern Profile Redesign - Layout Fixes (Facebook Clone Style)
   ========================================================================= */

/* =========================================================================
   Modern Profile Header (Facebook Clone Master - Pixel Perfect Flexbox)
   ========================================================================= */

.profile-header {
  background: #fff !important;
  margin-bottom: 0 !important;
  border-radius: 8px 8px 0 0 !important;
  border: none !important;
  padding: 0 !important;
  display: block !important;
  position: relative !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

body.night-mode .profile-header {
  background: #242526 !important;
}

/* Cover Wrapper */
.profile-cover-wrapper {
  width: 100% !important;
  height: 400px !important;
  max-height: 460px !important;
  position: relative !important;
  border-radius: 8px 8px 0 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  background: #18191a;
}

.profile-cover-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Cover Edit Button */
.profile-cover-buttons {
  position: absolute !important;
  bottom: 16px !important;
  right: 24px !important;
  top: auto !important;
  left: auto !important;
  display: flex !important;
  gap: 8px !important;
  z-index: 20 !important;
}

.profile-cover-change {
  background: #ffffff !important;
  color: #050505 !important;
  border-radius: 6px !important;
  padding: 8px 14px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  opacity: 1 !important;
  border: none !important;
  transition: background 0.15s ease-in-out !important;
}

.profile-cover-change:hover {
  background: #f0f2f5 !important;
}

body.night-mode .profile-cover-change {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .profile-cover-change:hover {
  background: #4e4f50 !important;
}

/* Header Content: Avatar + Info + Buttons Row */
.profile-header-content {
  display: flex !important;
  align-items: flex-end !important;
  padding: 0 32px 16px 32px !important;
  gap: 20px !important;
  position: relative !important;
}

/* Profile Avatar */
.profile-avatar-wrapper,
.profile-avatar-wrapper:not(.static) {
  margin-top: -32px !important;
  width: 168px !important;
  height: 168px !important;
  flex-shrink: 0 !important;
  position: relative !important;
  overflow: visible !important;
  border-radius: 50% !important;
  border: 4px solid #fff !important;
  background: #fff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  z-index: 10 !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  padding: 0 !important;
  align-self: auto !important;
  justify-self: auto !important;
}

body.night-mode .profile-avatar-wrapper,
body.night-mode .profile-avatar-wrapper:not(.static) {
  border-color: #242526 !important;
  background: #242526 !important;
}

.profile-avatar-wrapper>img,
.profile-avatar-wrapper:not(.static) img {
  width: 160px !important;
  height: 160px !important;
  border: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Avatar Camera Edit Button */
.profile-avatar-change {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  top: auto !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  border: 2px solid #fff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  font-size: 15px !important;
  padding: 0 !important;
  transition: background 0.15s ease-in-out !important;
  z-index: 25 !important;
}

.profile-avatar-change:hover {
  background: #d8dadf !important;
}

body.night-mode .profile-avatar-change {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
  border-color: #242526 !important;
}

body.night-mode .profile-avatar-change:hover {
  background: #4e4f50 !important;
}

.profile-avatar-crop,
.profile-avatar-delete {
  display: none !important;
}

/* Info and Actions Flex Container */
.profile-info-and-actions {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  padding-bottom: 8px !important;
  min-width: 0 !important;
}

/* Name and Meta */
.profile-name-wrapper {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  text-align: left !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  background: transparent !important;
}

.profile-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}

.profile-title-link {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
}

body.night-mode .profile-title-link {
  color: #e4e6eb !important;
}

.profile-friends-meta {
  font-size: 14px !important;
  font-weight: 600 !important;
}

.profile-friends-link {
  color: #65676b !important;
  text-decoration: none !important;
}

.profile-friends-link:hover {
  text-decoration: underline !important;
}

body.night-mode .profile-friends-link {
  color: #b0b3b8 !important;
}

/* Profile Action Buttons */
.profile-buttons-wrapper {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  position: static !important;
  padding: 0 !important;
  margin: 0 !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  transform: none !important;
  background: transparent !important;
}

.profile-buttons-wrapper .btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  height: 36px !important;
  padding: 0 14px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  box-shadow: none !important;
  transition: background 0.15s ease-in-out !important;
  white-space: nowrap !important;
}

.profile-buttons-wrapper .btn-primary {
  background: #1877f2 !important;
  color: #ffffff !important;
}

.profile-buttons-wrapper .btn-primary:hover {
  background: #166fe5 !important;
  color: #ffffff !important;
}

.profile-buttons-wrapper .btn-light {
  background: #e4e6eb !important;
  color: #050505 !important;
}

.profile-buttons-wrapper .btn-light:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .profile-buttons-wrapper .btn-light {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .profile-buttons-wrapper .btn-light:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

.profile-buttons-wrapper .btn-icon {
  width: 36px !important;
  padding: 0 !important;
}

/* Tabs Bar */
.profile-tabs-wrapper {
  background: #fff !important;
  margin-bottom: 16px !important;
  border-radius: 0 0 8px 8px !important;
  border-top: 1px solid #ced0d4 !important;
  padding: 0 24px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  overflow: visible !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}

body.night-mode .profile-tabs-wrapper {
  background: #242526 !important;
  border-top-color: #3e4042 !important;
}

.profile-tabs-wrapper a {
  border-radius: 6px !important;
  padding: 14px 16px !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #65676b !important;
  border: none !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  position: relative !important;
  transition: background 0.15s ease-in-out !important;
}

.profile-tabs-wrapper a:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
}

.profile-tabs-wrapper a.active {
  color: #1877f2 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

.profile-tabs-wrapper a.active::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #1877f2 !important;
  border-radius: 3px 3px 0 0 !important;
}

body.night-mode .profile-tabs-wrapper a {
  color: #b0b3b8 !important;
}

body.night-mode .profile-tabs-wrapper a:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .profile-tabs-wrapper a.active {
  color: #2d88ff !important;
}

body.night-mode .profile-tabs-wrapper a.active::after {
  background: #2d88ff !important;
}

/* Profile Tabs More Dropdown */
.fb-profile-tabs-more {
  position: relative !important;
}

.fb-profile-tabs-more .dropdown-toggle {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

.fb-profile-tabs-more .dropdown-toggle::after {
  display: none !important;
}

.fb-profile-tabs-more .dropdown-menu {
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  border: none !important;
  padding: 8px !important;
  min-width: 200px !important;
  z-index: 1050 !important;
}

.fb-profile-tabs-more .dropdown-item {
  padding: 10px 14px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  display: flex !important;
  align-items: center !important;
  color: #050505 !important;
  transition: background 0.15s ease !important;
}

.night-mode .fb-profile-tabs-more .dropdown-item {
  color: #e4e6eb !important;
}

.fb-profile-tabs-more .dropdown-item:hover {
  background: #f0f2f5 !important;
}

.night-mode .fb-profile-tabs-more .dropdown-item:hover {
  background: #3a3b3c !important;
}

.fb-profile-tabs-more .dropdown-item.active {
  color: #1877f2 !important;
  background: rgba(24, 119, 242, 0.1) !important;
}

.night-mode .fb-profile-tabs-more .dropdown-item.active {
  color: #2d88ff !important;
  background: rgba(45, 136, 255, 0.15) !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .profile-cover-wrapper {
    height: 200px !important;
    border-radius: 0 !important;
  }

  .profile-header-content {
    flex-direction: column !important;
    align-items: center !important;
    padding: 0 16px 16px 16px !important;
    gap: 12px !important;
  }

  .profile-avatar-wrapper,
  .profile-avatar-wrapper:not(.static) {
    margin-top: -60px !important;
    width: 120px !important;
    height: 120px !important;
  }

  .profile-avatar-wrapper>img,
  .profile-avatar-wrapper:not(.static) img {
    width: 112px !important;
    height: 112px !important;
  }

  .profile-avatar-change {
    bottom: 4px !important;
    right: 4px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 13px !important;
  }

  .profile-info-and-actions {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
  }

  .profile-name-wrapper {
    text-align: center !important;
    align-items: center !important;
  }

  .profile-title-row {
    justify-content: center !important;
  }

  .profile-title-link {
    font-size: 22px !important;
  }

  .profile-buttons-wrapper {
    justify-content: center !important;
    width: 100% !important;
    gap: 8px !important;
  }

  .profile-buttons-wrapper .btn {
    flex: 1 1 auto !important;
    min-width: 100px !important;
  }

  .profile-buttons-wrapper .btn-icon {
    flex: 0 0 36px !important;
    min-width: 36px !important;
  }

  .profile-tabs-wrapper {
    padding: 0 8px !important;
  }

  .profile-tabs-wrapper a {
    padding: 12px 10px !important;
    font-size: 14px !important;
  }
}

/* =========================================================================
   Profile Page Centered Layout (Equal Symmetrical Margins)
   ========================================================================= */
.profile-page-container {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  box-sizing: border-box !important;
}

.profile-page-container>.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.profile-page-container>.row>.col-12 {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

@media (max-width: 767px) {
  .profile-page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Hide posts filter on profile page */
.profile-page-container .posts-filter {
  display: none !important;
}

/* ==========================================================================
   Authentic Facebook Group Design
   ========================================================================== */
.fb-group-header-card {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 0 auto 16px auto !important;
  background: #ffffff !important;
  border-radius: 0 0 8px 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden;
  position: relative;
  border: none;
}

.night-mode .fb-group-header-card {
  background: #242526 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Group Body 2-Column Desktop Centered Layout (1100px container with margins) */
.fb-group-body-row {
  max-width: 1100px !important;
  width: 100% !important;
  margin: 16px auto !important;
  padding: 0 16px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
}

@media (min-width: 992px) {
  .fb-group-feed-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 680px !important;
    padding: 0 !important;
  }

  .fb-group-side-col {
    flex: 0 0 380px !important;
    width: 380px !important;
    max-width: 380px !important;
    padding: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .fb-group-header-card {
    border-radius: 0 !important;
    margin-bottom: 12px !important;
  }

  .fb-group-body-row {
    flex-direction: column !important;
    padding: 0 12px !important;
  }

  .fb-group-feed-col,
  .fb-group-side-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

.fb-group-body-row>.col-12 {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
}

/* Group Settings 2-Column Desktop Centered Layout (280px nav + 722px main = 1018px + 32px padding = 1050px) */
@media (min-width: 992px) {
  .fb-group-settings-nav-col {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 280px !important;
    padding: 0 !important;
  }

  .fb-group-settings-main-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 722px !important;
    padding: 0 !important;
  }
}

@media (max-width: 991.98px) {

  .fb-group-settings-nav-col,
  .fb-group-settings-main-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* Settings Card & Nav Polish */
.fb-group-settings-nav-col .card,
.fb-group-settings-main-col .card {
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  overflow: hidden !important;
  margin-bottom: 16px !important;
}

.night-mode .fb-group-settings-nav-col .card,
.night-mode .fb-group-settings-main-col .card {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.fb-group-settings-nav-col .card-body.with-nav {
  padding: 8px !important;
}

.fb-group-settings-nav-col .side-nav {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-group-settings-nav-col .side-nav>li {
  margin-bottom: 4px !important;
}

.fb-group-settings-nav-col .side-nav>li>a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 14px !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
}

.night-mode .fb-group-settings-nav-col .side-nav>li>a {
  color: #e4e6eb !important;
}

.fb-group-settings-nav-col .side-nav>li>a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.night-mode .fb-group-settings-nav-col .side-nav>li>a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

.fb-group-settings-nav-col .side-nav>li.active>a {
  background: #e7f3ff !important;
  color: #1877f2 !important;
}

.night-mode .fb-group-settings-nav-col .side-nav>li.active>a {
  background: rgba(45, 136, 255, 0.15) !important;
  color: #2d88ff !important;
}

.fb-group-settings-main-col .card-header {
  background: transparent !important;
  border-bottom: 1px solid #ced0d4 !important;
  padding: 16px 20px !important;
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.night-mode .fb-group-settings-main-col .card-header {
  border-bottom-color: #3e4042 !important;
  color: #e4e6eb !important;
}

.fb-group-settings-main-col .card-body {
  padding: 20px !important;
}

.fb-group-settings-main-col .card-footer {
  background: transparent !important;
  border-top: 1px solid #ced0d4 !important;
  padding: 14px 20px !important;
}

.night-mode .fb-group-settings-main-col .card-footer {
  border-top-color: #3e4042 !important;
}

[dir="rtl"] .fb-group-facepile {
  padding-left: 0;
  padding-right: 6px;
}

[dir="rtl"] .fb-group-facepile-avatar {
  margin-left: 0;
  margin-right: -8px;
}

[dir="rtl"] .fb-group-facepile-avatar:first-child {
  margin-right: 0;
}

[dir="rtl"] .fb-group-tabs-tools {
  padding-left: 0;
  padding-right: 12px;
}

.fb-group-cover-wrapper {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  background: #e4e6eb;
  border-radius: 10px 10px 0 0;
}

.night-mode .fb-group-cover-wrapper {
  background: #18191a;
}

.fb-group-cover-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-group-info-bar {
  padding: 20px 24px 14px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  background: #ffffff;
}

.night-mode .fb-group-info-bar {
  background: #242526;
}

.fb-group-title-section {
  flex: 1;
  min-width: 0;
}

.fb-group-title {
  font-size: 28px;
  font-weight: 800;
  color: #050505;
  line-height: 1.25;
  margin: 0 0 6px 0;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.night-mode .fb-group-title {
  color: #e4e6eb;
}

.fb-group-subtitle {
  font-size: 14px;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-weight: 500;
}

.night-mode .fb-group-subtitle {
  color: #b0b3b8;
}

.fb-group-facepile {
  display: flex;
  align-items: center;
  margin-top: 8px;
  padding-left: 6px;
}

.fb-group-facepile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -8px;
  overflow: hidden;
  display: inline-block;
  transition: transform 0.15s ease;
  flex-shrink: 0;
  background: #e4e6eb;
}

.night-mode .fb-group-facepile-avatar {
  border-color: #242526;
  background: #3a3b3c;
}

.fb-group-facepile-avatar:first-child {
  margin-left: 0;
}

.fb-group-facepile-avatar:hover {
  transform: scale(1.18);
  z-index: 5;
}

.fb-group-facepile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-group-actions-section {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
  margin-bottom: 4px;
}

.fb-btn-primary {
  background: #1877f2 !important;
  color: #ffffff !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 16px !important;
  height: 36px !important;
  border-radius: 6px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
}

.fb-btn-primary:hover {
  background: #166fe5 !important;
  color: #ffffff !important;
}

.fb-btn-secondary {
  background: #e4e6eb !important;
  color: #050505 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 0 14px !important;
  height: 36px !important;
  border-radius: 6px !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
}

.night-mode .fb-btn-secondary {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-btn-secondary:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

.night-mode .fb-btn-secondary:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

.fb-btn-secondary.btn-icon {
  width: 36px !important;
  padding: 0 !important;
}

/* Authentic Facebook Underline Tabs */
.fb-group-tabs-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding: 0 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #ffffff;
  min-height: 48px;
}

.night-mode .fb-group-tabs-bar {
  border-top-color: rgba(255, 255, 255, 0.1);
  background: #242526;
}

.fb-group-tabs-list {
  display: flex;
  align-items: center;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.fb-group-tabs-list::-webkit-scrollbar {
  display: none;
}

.fb-group-tab {
  padding: 14px 16px;
  font-size: 15px;
  font-weight: 600;
  color: #65676b;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.night-mode .fb-group-tab {
  color: #b0b3b8;
}

.fb-group-tab:hover {
  background: rgba(0, 0, 0, 0.04);
  color: #050505;
}

.night-mode .fb-group-tab:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #e4e6eb;
}

.fb-group-tab.active {
  color: #1877f2 !important;
  border-bottom-color: #1877f2 !important;
  font-weight: 700;
  border-radius: 0;
}

.night-mode .fb-group-tab.active {
  color: #2d88ff !important;
  border-bottom-color: #2d88ff !important;
}

.fb-group-tabs-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-left: 12px;
}

.fb-btn-tab-search {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #e4e6eb;
  color: #050505;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  border: none;
  transition: background 0.15s ease;
  text-decoration: none !important;
}

.night-mode .fb-btn-tab-search {
  background: #3a3b3c;
  color: #e4e6eb;
}

.fb-btn-tab-search:hover {
  background: #d8dadf;
}

.night-mode .fb-btn-tab-search:hover {
  background: #4e4f50;
}

/* Authentic Facebook Group Sidebar (About & Recent Media) */
.fb-group-sidebar-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 16px 18px;
  margin-bottom: 16px;
  border: none;
}

.night-mode .fb-group-sidebar-card {
  background: #242526;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.fb-group-sidebar-title {
  font-size: 17px;
  font-weight: 700;
  color: #050505;
  margin: 0 0 12px 0;
}

.night-mode .fb-group-sidebar-title {
  color: #e4e6eb;
}

.fb-group-sidebar-desc {
  font-size: 14px;
  color: #050505;
  line-height: 1.5;
  margin-bottom: 16px;
  word-break: break-word;
}

.night-mode .fb-group-sidebar-desc {
  color: #e4e6eb;
}

.fb-group-sidebar-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.fb-group-sidebar-icon {
  font-size: 20px;
  color: #65676b;
  width: 24px;
  text-align: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.night-mode .fb-group-sidebar-icon {
  color: #b0b3b8;
}

.fb-group-sidebar-label {
  font-size: 15px;
  font-weight: 600;
  color: #050505;
  margin-bottom: 2px;
}

.night-mode .fb-group-sidebar-label {
  color: #e4e6eb;
}

.fb-group-sidebar-sub {
  font-size: 13px;
  color: #65676b;
  line-height: 1.4;
}

.night-mode .fb-group-sidebar-sub {
  color: #b0b3b8;
}

/* Recent Media 2x2 Grid Card */
.fb-group-media-card {
  background: #ffffff;
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  padding: 16px 18px;
  margin-bottom: 16px;
  border: none;
}

.night-mode .fb-group-media-card {
  background: #242526;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}

.fb-group-media-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.fb-group-media-title {
  font-size: 17px;
  font-weight: 700;
  color: #050505;
  margin: 0;
}

.night-mode .fb-group-media-title {
  color: #e4e6eb;
}

.fb-group-media-all-link {
  font-size: 14px;
  color: #1877f2;
  text-decoration: none !important;
  font-weight: 500;
}

.fb-group-media-all-link:hover {
  text-decoration: underline !important;
}

.fb-group-media-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
}

.fb-group-media-thumb {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #e4e6eb;
  cursor: pointer;
  position: relative;
}

.night-mode .fb-group-media-thumb {
  background: #3a3b3c;
}

.fb-group-media-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}

.fb-group-media-thumb:hover img {
  transform: scale(1.05);
}

.fb-btn-media-all {
  width: 100% !important;
  height: 36px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  transition: background 0.15s ease !important;
}

.night-mode .fb-btn-media-all {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-btn-media-all:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

.night-mode .fb-btn-media-all:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

@media (max-width: 767.98px) {
  .fb-group-cover-wrapper {
    height: 200px;
    border-radius: 0;
  }

  .fb-group-info-bar {
    flex-direction: column;
    align-items: flex-start;
    padding: 14px 16px;
    gap: 14px;
  }

  .fb-group-actions-section {
    width: 100%;
    justify-content: flex-start;
  }

  .fb-group-tabs-bar {
    padding: 0 12px;
  }

  .fb-group-tab {
    padding: 12px 12px;
    font-size: 14px;
  }
}

/* ==========================================================================
   Authentic Facebook Profile Enhancements & Desktop Redesign
   ========================================================================== */

/* 1. Page Container */
.profile-page-container {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background-color: #f0f2f5 !important;
  min-height: 100vh !important;
}

body.night-mode .profile-page-container {
  background-color: #18191a !important;
}

.profile-page-container>.row {
  margin: 0 !important;
}

.profile-page-container .sg-offcanvas-mainbar {
  padding: 0 !important;
}

/* 2. Profile Header (Full-width white wrapper with border/shadow) */
.profile-header {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border-radius: 0 !important;
  margin-bottom: 16px !important;
  position: relative !important;
  width: 100% !important;
  border-bottom: 1px solid #ced0d4 !important;
}

body.night-mode .profile-header {
  background: #242526 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
  border-bottom-color: #3e4042 !important;
}

/* 3. Cover Photo (Centered with desktop margins) */
.profile-cover-wrapper {
  max-width: 1050px !important;
  width: 100% !important;
  margin: 0 auto !important;
  height: 380px !important;
  position: relative !important;
  background: linear-gradient(180deg, #1c1e21 0%, #2f3338 100%) !important;
  border-radius: 0 0 8px 8px !important;
  overflow: hidden !important;
}

@media (max-width: 991.98px) {
  .profile-cover-wrapper {
    height: 240px !important;
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.profile-cover-wrapper img.js_position-cover-cropped,
.profile-cover-wrapper img.js_position-cover-full {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Edit Cover Photo Button (Bottom-Right inside cover) */
.profile-cover-buttons {
  position: absolute !important;
  bottom: 16px !important;
  right: 32px !important;
  top: auto !important;
  left: auto !important;
  opacity: 1 !important;
  z-index: 10 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

[dir="rtl"] .profile-cover-buttons {
  right: auto !important;
  left: 32px !important;
}

@media (max-width: 991.98px) {
  .profile-cover-buttons {
    bottom: 12px !important;
    right: 16px !important;
  }

  [dir="rtl"] .profile-cover-buttons {
    right: auto !important;
    left: 16px !important;
  }
}

.profile-cover-change {
  background: #ffffff !important;
  color: #050505 !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 36px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  cursor: pointer !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  border: none !important;
  transition: background 0.15s ease !important;
}

.profile-cover-change:hover {
  background: #f2f2f2 !important;
}

.profile-cover-position,
.profile-cover-delete {
  background: rgba(0, 0, 0, 0.6) !important;
  color: #fff !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
}

/* 4. Profile Header Content (Avatar + Info + Buttons) */
.profile-header-content {
  max-width: 1050px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 32px !important;
  display: flex !important;
  align-items: flex-end !important;
  justify-content: flex-start !important;
  position: relative !important;
  min-height: 100px !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
}

@media (max-width: 991.98px) {
  .profile-header-content {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 0 16px !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

/* 5. Avatar & Thought Bubble */
.profile-avatar-wrapper {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin-top: -84px !important;
  width: 168px !important;
  height: 168px !important;
  border-radius: 50% !important;
  border: 4px solid #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0 !important;
  z-index: 5 !important;
  padding: 0 !important;
}

body.night-mode .profile-avatar-wrapper {
  border-color: #242526 !important;
  background: #242526 !important;
}

@media (max-width: 991.98px) {
  .profile-avatar-wrapper {
    margin-top: -65px !important;
    width: 130px !important;
    height: 130px !important;
  }
}

.profile-avatar-wrapper img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

/* Thought Bubble above Avatar */
.fb-profile-thought-bubble {
  position: absolute !important;
  top: -38px !important;
  left: -20px !important;
  background: #ffffff !important;
  color: #65676b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 8px 14px !important;
  border-radius: 18px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  white-space: nowrap !important;
  z-index: 6 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

[dir="rtl"] .fb-profile-thought-bubble {
  left: auto !important;
  right: -20px !important;
}

.fb-profile-thought-bubble::after {
  content: "" !important;
  position: absolute !important;
  bottom: -6px !important;
  left: 32px !important;
  width: 10px !important;
  height: 10px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

[dir="rtl"] .fb-profile-thought-bubble::after {
  left: auto !important;
  right: 32px !important;
}

.fb-profile-thought-bubble::before {
  content: "" !important;
  position: absolute !important;
  bottom: -12px !important;
  left: 40px !important;
  width: 6px !important;
  height: 6px !important;
  background: #ffffff !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

[dir="rtl"] .fb-profile-thought-bubble::before {
  left: auto !important;
  right: 40px !important;
}

.fb-profile-thought-bubble:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  color: #050505 !important;
}

body.night-mode .fb-profile-thought-bubble {
  background: #242526 !important;
  color: #b0b3b8 !important;
  border-color: #3e4042 !important;
}

body.night-mode .fb-profile-thought-bubble::after,
body.night-mode .fb-profile-thought-bubble::before {
  background: #242526 !important;
}

body.night-mode .fb-profile-thought-bubble:hover {
  color: #e4e6eb !important;
}

/* Avatar camera button */
.profile-avatar-change {
  position: absolute !important;
  bottom: 8px !important;
  right: 8px !important;
  top: auto !important;
  left: auto !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
  cursor: pointer !important;
  padding: 0 !important;
}

[dir="rtl"] .profile-avatar-change {
  right: auto !important;
  left: 8px !important;
}

body.night-mode .profile-avatar-change {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
  border-color: #242526 !important;
}

/* 6. Info & Actions Flex */
.profile-info-and-actions {
  display: flex !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
  align-items: flex-end !important;
  justify-content: space-between !important;
  gap: 16px 24px !important;
  padding-bottom: 16px !important;
  flex-wrap: wrap !important;
}

@media (max-width: 991.98px) {
  .profile-info-and-actions {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    padding-bottom: 12px !important;
  }
}

/* Name and details */
.profile-name-wrapper {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  flex: 1 1 0 !important;
  min-width: 0 !important;
}

[dir="rtl"] .profile-name-wrapper {
  text-align: right !important;
}

@media (max-width: 991.98px) {
  .profile-name-wrapper {
    text-align: center !important;
  }

  [dir="rtl"] .profile-name-wrapper {
    text-align: center !important;
  }
}

.profile-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
}

@media (max-width: 991.98px) {
  .profile-title-row {
    justify-content: center !important;
  }
}

.profile-title-link {
  font-size: 32px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  line-height: 1.2 !important;
  letter-spacing: -0.5px !important;
  margin: 0 !important;
}

body.night-mode .profile-title-link {
  color: #e4e6eb !important;
}

.profile-friends-meta {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  margin-bottom: 6px !important;
}

body.night-mode .profile-friends-meta {
  color: #b0b3b8 !important;
}

.profile-friends-meta a {
  color: #65676b !important;
  text-decoration: none !important;
}

.profile-friends-meta a:hover {
  text-decoration: underline !important;
}

body.night-mode .profile-friends-meta a {
  color: #b0b3b8 !important;
}

.fb-profile-header-bio {
  font-size: 15px !important;
  color: #050505 !important;
  line-height: 1.4 !important;
  margin-bottom: 6px !important;
  max-width: 600px !important;
}

body.night-mode .fb-profile-header-bio {
  color: #e4e6eb !important;
}

.fb-profile-header-headline {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  font-size: 14px !important;
  color: #65676b !important;
  margin-top: 4px !important;
}

@media (max-width: 991.98px) {
  .fb-profile-header-headline {
    justify-content: center !important;
  }
}

body.night-mode .fb-profile-header-headline {
  color: #b0b3b8 !important;
}

.fb-profile-header-headline .headline-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
}

/* 7. Action Buttons */
.profile-buttons-wrapper {
  position: static !important;
  background: transparent !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin-bottom: 4px !important;
  flex-shrink: 0 !important;
}

@media (max-width: 991.98px) {
  .profile-buttons-wrapper {
    justify-content: center !important;
    width: 100% !important;
  }
}

.profile-buttons-wrapper .btn {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  transition: background 0.15s ease, transform 0.15s ease !important;
}

.profile-buttons-wrapper .btn-primary {
  background: #0866ff !important;
  color: #ffffff !important;
}

.profile-buttons-wrapper .btn-primary:hover {
  background: #1877f2 !important;
  color: #ffffff !important;
}

.profile-buttons-wrapper .btn-light {
  background: #e4e6eb !important;
  color: #050505 !important;
}

.profile-buttons-wrapper .btn-light:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .profile-buttons-wrapper .btn-light {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .profile-buttons-wrapper .btn-light:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

.profile-buttons-wrapper .btn-icon {
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* 8. Tabs Bar */
.profile-tabs-wrapper {
  max-width: 1050px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 16px !important;
  border-top: 1px solid #ced0d4 !important;
  background: transparent !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 56px !important;
  border-radius: 0 !important;
  position: relative !important;
}

body.night-mode .profile-tabs-wrapper {
  border-color: #3e4042 !important;
}

@media (max-width: 991.98px) {
  .profile-tabs-wrapper {
    padding: 0 16px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
}

.fb-profile-tabs-nav {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  flex: 1 1 auto !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}

.fb-profile-tabs-nav::-webkit-scrollbar {
  display: none !important;
}

.fb-profile-tabs-nav a {
  height: 52px !important;
  padding: 0 16px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  display: inline-flex !important;
  align-items: center !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  border-bottom: none !important;
  position: relative !important;
  white-space: nowrap !important;
  margin: 2px 0 !important;
}

body.night-mode .fb-profile-tabs-nav a {
  color: #b0b3b8 !important;
}

.fb-profile-tabs-nav a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #050505 !important;
}

body.night-mode .fb-profile-tabs-nav a:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e4e6eb !important;
}

.fb-profile-tabs-nav a.active {
  color: #1877f2 !important;
}

.fb-profile-tabs-nav a.active::after {
  content: "" !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 3px !important;
  background: #1877f2 !important;
  border-radius: 2px 2px 0 0 !important;
}

.fb-profile-tabs-extra .btn-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 6px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: none !important;
}

body.night-mode .fb-profile-tabs-extra .btn-icon {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* 9. Profile Body 2-Column Layout */
.fb-profile-body-row {
  max-width: 1050px !important;
  width: 100% !important;
  margin: 16px auto !important;
  padding: 0 16px !important;
  display: flex !important;
  justify-content: center !important;
  gap: 16px !important;
}

@media (min-width: 992px) {
  .fb-profile-left-col {
    flex: 0 0 360px !important;
    width: 360px !important;
    max-width: 360px !important;
    padding: 0 !important;
  }

  .fb-profile-right-col {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: 642px !important;
    padding: 0 !important;
  }
}

@media (max-width: 991.98px) {
  .fb-profile-body-row {
    flex-direction: column !important;
    padding: 0 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 !important;
  }

  .fb-profile-left-col,
  .fb-profile-right-col {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }
}

/* 10. Posts Header Bar (Desktop Facebook Style) */
.fb-profile-posts-header-card {
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  padding: 12px 16px !important;
  margin-bottom: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

body.night-mode .fb-profile-posts-header-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fb-profile-posts-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 !important;
}

body.night-mode .fb-profile-posts-title {
  color: #e4e6eb !important;
}

.fb-profile-posts-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fb-btn-post-action {
  height: 36px !important;
  padding: 0 14px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  text-decoration: none !important;
}

.fb-btn-post-action:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .fb-btn-post-action {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-btn-post-action:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* 11. Personal Details Sidebar Card */
.fb-profile-sidebar-edit-icon {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  transition: background 0.15s ease !important;
  text-decoration: none !important;
}

.fb-profile-sidebar-edit-icon:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #050505 !important;
}

body.night-mode .fb-profile-sidebar-edit-icon {
  color: #b0b3b8 !important;
}

body.night-mode .fb-profile-sidebar-edit-icon:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #e4e6eb !important;
}

.fb-profile-facepile {
  display: flex;
  align-items: center;
  margin-top: 6px;
  padding-left: 2px;
}

.fb-profile-facepile-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  margin-left: -8px;
  overflow: hidden;
  display: inline-block;
  transition: transform 0.15s ease;
  flex-shrink: 0;
  background: #e4e6eb;
}

.night-mode .fb-profile-facepile-avatar {
  border-color: #242526;
  background: #3a3b3c;
}

.fb-profile-facepile-avatar:first-child {
  margin-left: 0;
}

.fb-profile-facepile-avatar:hover {
  transform: scale(1.18);
  z-index: 5;
}

.fb-profile-facepile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-profile-sidebar-card {
  background: #ffffff !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 16px 16px 12px !important;
  margin-bottom: 16px !important;
  transition: box-shadow 0.15s ease !important;
}

body.night-mode .fb-profile-sidebar-card,
.night-mode .fb-profile-sidebar-card {
  background: #242526 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.fb-profile-sidebar-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 14px !important;
}

.fb-profile-sidebar-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-profile-sidebar-title,
.night-mode .fb-profile-sidebar-title {
  color: #e4e6eb !important;
}

.fb-profile-sidebar-sub {
  font-size: 13.5px !important;
  color: #65676b !important;
  margin-top: 3px !important;
}

body.night-mode .fb-profile-sidebar-sub,
.night-mode .fb-profile-sidebar-sub {
  color: #b0b3b8 !important;
}

.fb-profile-sidebar-link {
  font-size: 14px !important;
  color: #1877f2 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 5px 9px !important;
  border-radius: 6px !important;
  transition: background 0.15s ease !important;
  white-space: nowrap !important;
}

.fb-profile-sidebar-link:hover {
  background: rgba(24, 119, 242, 0.08) !important;
}

body.night-mode .fb-profile-sidebar-link,
.night-mode .fb-profile-sidebar-link {
  color: #2d88ff !important;
}

body.night-mode .fb-profile-sidebar-link:hover,
.night-mode .fb-profile-sidebar-link:hover {
  background: rgba(45, 136, 255, 0.15) !important;
}

.fb-profile-bio {
  font-size: 14.5px !important;
  color: #050505 !important;
  line-height: 1.5 !important;
  text-align: center !important;
  margin-bottom: 12px !important;
  padding: 0 4px 12px 4px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  word-break: break-word !important;
}

body.night-mode .fb-profile-bio,
.night-mode .fb-profile-bio {
  color: #e4e6eb !important;
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

/* Personal Details / Intro List (Monochromatic & Clean Spacing) */
.fb-profile-sidebar-card .about-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 12px 0 !important;
}

.fb-profile-sidebar-card .about-list li {
  margin: 0 !important;
  padding: 0 !important;
}

.fb-profile-sidebar-card .about-list-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 7px 0 !important;
  min-height: auto !important;
  font-size: 14.5px !important;
  line-height: 1.4 !important;
  color: #050505 !important;
  position: static !important;
}

body.night-mode .fb-profile-sidebar-card .about-list-item,
.night-mode .fb-profile-sidebar-card .about-list-item {
  color: #e4e6eb !important;
}

.fb-profile-sidebar-card .about-list-item .main-icon,
.fb-profile-sidebar-card .about-list-item i {
  position: static !important;
  width: 20px !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.65 !important;
  filter: grayscale(1) !important;
  transition: opacity 0.15s ease !important;
}

body.night-mode .fb-profile-sidebar-card .about-list-item .main-icon,
body.night-mode .fb-profile-sidebar-card .about-list-item i,
.night-mode .fb-profile-sidebar-card .about-list-item .main-icon,
.night-mode .fb-profile-sidebar-card .about-list-item i {
  filter: grayscale(1) brightness(1.2) !important;
  opacity: 0.75 !important;
}

.fb-profile-sidebar-card .about-list-item a {
  color: inherit !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.fb-profile-sidebar-card .about-list-item a:hover {
  text-decoration: underline !important;
}

.fb-btn-profile-edit {
  width: 100% !important;
  height: 36px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  font-weight: 600 !important;
  font-size: 14.5px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  border: none !important;
  transition: background 0.15s ease !important;
}

body.night-mode .fb-btn-profile-edit,
.night-mode .fb-btn-profile-edit {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-btn-profile-edit:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .fb-btn-profile-edit:hover,
.night-mode .fb-btn-profile-edit:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* 3x3 Photos Grid (Enforced Aspect Ratio & Smooth Hover) */
.fb-profile-photos-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

.fb-profile-photo-thumb {
  aspect-ratio: 1 / 1 !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #e4e6eb !important;
  cursor: pointer !important;
  position: relative !important;
  border-radius: 4px !important;
}

body.night-mode .fb-profile-photo-thumb,
.night-mode .fb-profile-photo-thumb {
  background: #3a3b3c !important;
}

.fb-profile-photo-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.13, 1) !important;
}

.fb-profile-photo-thumb:hover img {
  transform: scale(1.05) !important;
}

/* 3x3 Friends Grid (Consistent Radii, Scannable Typography) */
.fb-profile-friends-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 12px 8px !important;
}

.fb-profile-friend-item {
  min-width: 0 !important;
}

.fb-profile-friend-link {
  display: flex !important;
  flex-direction: column !important;
  text-decoration: none !important;
}

.fb-profile-friend-avatar {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #e4e6eb !important;
  margin-bottom: 6px !important;
  position: relative !important;
}

body.night-mode .fb-profile-friend-avatar,
.night-mode .fb-profile-friend-avatar {
  background: #3a3b3c !important;
}

.fb-profile-friend-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.13, 1) !important;
}

.fb-profile-friend-link:hover .fb-profile-friend-avatar img {
  transform: scale(1.05) !important;
}

.fb-profile-friend-name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.3 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: block !important;
}

body.night-mode .fb-profile-friend-name,
.night-mode .fb-profile-friend-name {
  color: #e4e6eb !important;
}

/* Hide mini footer links in profile, page, and group containers */
.profile-page-container .mini-footer,
.profile-page-container .mini-footer .links,
.profile-page-container .links {
  display: none !important;
}

/* =========================================================================
   Authentic Facebook Post Styling
   ========================================================================= */
.post {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #ced0d4 !important;
  margin-bottom: 16px !important;
  position: relative !important;
}

body.night-mode .post {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.post-header {
  padding: 12px 16px 0 16px !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.post-avatar {
  display: block !important;
  position: relative !important;
  padding-right: 0 !important;
  flex-shrink: 0 !important;
}

.post-avatar-picture,
.post-avatar-picture.rounded,
.post-avatar-picture.large {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  padding-top: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.post-avatar .online-dot {
  top: 26px !important;
  right: 0px !important;
  width: 11px !important;
  height: 11px !important;
  border: 2px solid #fff !important;
}

body.night-mode .post-avatar .online-dot {
  border-color: #242526 !important;
}

.post-meta {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.post-author {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.3333 !important;
  text-decoration: none !important;
}

.post-author:hover {
  text-decoration: underline !important;
}

body.night-mode .post-author {
  color: #e4e6eb !important;
}

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

body.night-mode .post-title {
  color: #b0b3b8 !important;
}

.post-time {
  font-size: 12px !important;
  color: #65676b !important;
  line-height: 1.2308 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

.post-time a {
  color: #65676b !important;
  text-decoration: none !important;
  font-size: 12px !important;
}

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

.post-time .fa,
.post-time .fas,
.post-time .btn-group,
.post-time .btn-group .btn {
  font-size: 11px !important;
  padding: 0 1px !important;
  color: #65676b !important;
  vertical-align: middle !important;
}

.post-time .btn-group-icon {
  font-size: 11px !important;
}

body.night-mode .post-time,
body.night-mode .post-time a,
body.night-mode .post-time .fa,
body.night-mode .post-time .fas,
body.night-mode .post-time .btn-group .btn {
  color: #b0b3b8 !important;
}

.post-meta .dropdown {
  float: right !important;
}

.post-meta .dropdown .dropdown-toggle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  background: transparent !important;
  padding: 0 !important;
  transition: background 0.15s ease !important;
}

.post-meta .dropdown .dropdown-toggle:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
}

body.night-mode .post-meta .dropdown .dropdown-toggle {
  color: #b0b3b8 !important;
}

body.night-mode .post-meta .dropdown .dropdown-toggle:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.post-text {
  padding: 4px 16px 12px 16px !important;
  font-size: 15px !important;
  line-height: 1.4667 !important;
  color: #050505 !important;
}

body.night-mode .post-text {
  color: #e4e6eb !important;
}

.post-stats,
.fb-shell .post-stats {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  padding: 6px 16px !important;
  margin: 0 !important;
  min-height: 28px !important;
  border-bottom: 1px solid #ced0d4 !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #65676b !important;
}

body.night-mode .post-stats,
body.night-mode .fb-shell .post-stats {
  color: #b0b3b8 !important;
  border-bottom-color: #3e4042 !important;
}

/* Left: Reactions Container */
.post-stats .js_post-reactions-stats,
.js_post-reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

.js_post-reactions-stats .float-start {
  float: none !important;
  display: inline-flex !important;
  align-items: center !important;
}

.post-stats .reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  gap: 0 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}

.post-stats .reactions-stats-item {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff !important;
  margin-right: -4px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.night-mode .post-stats .reactions-stats-item {
  box-shadow: 0 0 0 2px var(--fb-dark-card) !important;
}

html[dir="RTL"] .post-stats .reactions-stats-item {
  margin-right: 0 !important;
  margin-left: -4px !important;
}

.post-stats .reactions-stats-item .inline-emoji,
.post-stats .reactions-stats-item .emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 18px !important;
  height: 18px !important;
}

.post-stats .reactions-stats-item img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.post-stats .reactions-stats>span,
.post-stats .reactions-stats span:last-child {
  display: inline-block !important;
  margin-left: 8px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[dir="RTL"] .post-stats .reactions-stats>span,
html[dir="RTL"] .post-stats .reactions-stats span:last-child {
  margin-left: 0 !important;
  margin-right: 8px !important;
}

body.night-mode .post-stats .reactions-stats>span,
body.night-mode .post-stats .reactions-stats span:last-child {
  color: #b0b3b8 !important;
}

/* Right: Comments & Shares on one single line */
.post-stats .float-end {
  float: none !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  white-space: nowrap !important;
}

html[dir="RTL"] .post-stats .float-end {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

.post-stats .float-end span,
.post-stats .float-end a,
.post-stats .float-end .pointer {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
}

.post-stats .float-end span:hover,
.post-stats .float-end a:hover,
.post-stats .float-end .pointer:hover {
  text-decoration: underline !important;
}

body.night-mode .post-stats .float-end span,
body.night-mode .post-stats .float-end a,
body.night-mode .post-stats .float-end .pointer {
  color: #b0b3b8 !important;
}

.post-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  padding: 4px 12px !important;
  margin: 0 !important;
  border-top: none !important;
  border-bottom: 1px solid #ced0d4 !important;
  gap: 4px !important;
}

/* post-actions handled by default theme css */

.post-footer {
  background: #ffffff !important;
  border-top: none !important;
  border-radius: 0 0 8px 8px !important;
  padding: 12px 16px !important;
}

body.night-mode .post-footer {
  background: #242526 !important;
}

/* Mobile Edge-to-Edge Fluidity for Posts & Profile */
@media (max-width: 991.98px) {
  .fb-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fb-shell .fb-main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .profile-page-container,
  .profile-page-container>.row,
  .profile-page-container>.row>.col-12,
  .profile-page-container .col-lg-8,
  .profile-page-container .sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .profile-header,
  body.logged-in .profile-header {
    border-radius: 0 !important;
    margin-bottom: 8px !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    left: 0 !important;
    right: 0 !important;
  }

  .profile-cover-wrapper,
  body.logged-in .profile-cover-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    border-radius: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .profile-header-content {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    box-sizing: border-box !important;
  }

  .profile-info-and-actions,
  .profile-name-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
  }

  .profile-tabs-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-inline: 0 !important;
    padding-left: 8px !important;
    padding-right: 8px !important;
    border-left: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  .fb-profile-body-row {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 8px !important;
  }

  .fb-profile-left-col,
  .fb-profile-right-col {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .fb-profile-sidebar-card,
  .fb-profile-posts-header-card,
  #publisher-box,
  .posts-filter {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }

  .post,
  .fb-shell .post,
  body.logged-in .post,
  body.logged-in .fb-shell .post {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  }
}

/* ==========================================================================
   Facebook Posts Filter Bar (Recent Updates / All Countries / All Types)
   ========================================================================== */
.posts-filter {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: transparent !important;
  border-radius: 0 !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 0 !important;
  line-height: normal !important;
}

body.night-mode .posts-filter {
  background: transparent !important;
  border: none !important;
}

/* Recent Updates Button on the left */
.posts-filter>span,
.posts-filter>a,
.posts-filter>a.dropdown-toggle {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #e4e6eb !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.posts-filter>a:hover,
.posts-filter>a.dropdown-toggle:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .posts-filter>span,
body.night-mode .posts-filter>a,
body.night-mode .posts-filter>a.dropdown-toggle {
  background: #242526 !important;
  color: #e4e6eb !important;
}

body.night-mode .posts-filter>a:hover,
body.night-mode .posts-filter>a.dropdown-toggle:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.posts-filter>a.dropdown-toggle:after {
  margin-left: 6px !important;
  vertical-align: middle !important;
  color: #65676b !important;
}

body.night-mode .posts-filter>a.dropdown-toggle:after {
  color: #b0b3b8 !important;
}

/* Right Actions Container */
.posts-filter .float-end {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  float: none !important;
  margin-left: auto !important;
}

html[dir="RTL"] .posts-filter .float-end {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Countries Filter Pill */
.posts-filter .float-end .countries-filter {
  background: #e4e6eb !important;
  color: #050505 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: none !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.posts-filter .float-end .countries-filter:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .posts-filter .float-end .countries-filter {
  background: #242526 !important;
  color: #e4e6eb !important;
}

body.night-mode .posts-filter .float-end .countries-filter:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.posts-filter .float-end .countries-filter i.fa-globe {
  color: #65676b !important;
  font-size: 13px !important;
}

body.night-mode .posts-filter .float-end .countries-filter i.fa-globe {
  color: #b0b3b8 !important;
}

/* Post Type Filter (All / Text / Photos / etc.) */
.posts-filter .js_posts-filter {
  margin-left: 0 !important;
}

.posts-filter .js_posts-filter .btn,
.posts-filter .js_posts-filter .btn.dropdown-toggle {
  background: #e4e6eb !important;
  color: #050505 !important;
  border-radius: 6px !important;
  padding: 6px 12px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  border: none !important;
  box-shadow: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.posts-filter .js_posts-filter .btn:hover,
.posts-filter .js_posts-filter .btn.dropdown-toggle:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .posts-filter .js_posts-filter .btn,
body.night-mode .posts-filter .js_posts-filter .btn.dropdown-toggle {
  background: #242526 !important;
  color: #e4e6eb !important;
}

body.night-mode .posts-filter .js_posts-filter .btn:hover,
body.night-mode .posts-filter .js_posts-filter .btn.dropdown-toggle:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.posts-filter .js_posts-filter .btn-group-icon {
  color: #65676b !important;
  font-size: 13px !important;
}

body.night-mode .posts-filter .js_posts-filter .btn-group-icon {
  color: #b0b3b8 !important;
}

/* Dropdown Menus */
.posts-filter .dropdown-menu {
  border-radius: 8px !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 6px !important;
  background: #ffffff !important;
}

body.night-mode .posts-filter .dropdown-menu {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.posts-filter .dropdown-menu .dropdown-item {
  border-radius: 6px !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: background 0.12s ease !important;
}

.posts-filter .dropdown-menu .dropdown-item:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
}

body.night-mode .posts-filter .dropdown-menu .dropdown-item {
  color: #e4e6eb !important;
}

body.night-mode .posts-filter .dropdown-menu .dropdown-item:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.posts-filter .dropdown-menu .dropdown-item .main-icon {
  width: 20px !important;
  height: 20px !important;
  margin-right: 6px !important;
}

/* Mobile Responsive */
@media (max-width: 767px) {
  .posts-filter {
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    padding: 0 0 8px 0 !important;
  }

  .posts-filter>span,
  .posts-filter>a,
  .posts-filter>a.dropdown-toggle {
    font-size: 12.5px !important;
    padding: 5px 10px !important;
  }

  .posts-filter .float-end .countries-filter,
  .posts-filter .js_posts-filter .btn {
    padding: 5px 10px !important;
    font-size: 12.5px !important;
  }
}

/* ==========================================================================
   DayTime Message Card (Compact Facebook Design)
   ========================================================================== */
.daytime_message {
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 14px !important;
  margin-bottom: 14px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  border-left: 3px solid #fba540 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  position: relative !important;
}

.daytime_message[style*="display: block"],
.daytime_message[style*="display: inline-block"],
.daytime_message:not([style*="display: none"]) {
  display: flex !important;
}

body.night-mode .daytime_message {
  background: #242526 !important;
  border-color: #3e4042 !important;
  border-left-color: #fba540 !important;
}

.daytime_message .daytime-icon-badge {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #fff8e7 !important;
}

.daytime_message .daytime-icon-badge.afternoon {
  background: #e7f3ff !important;
}

.daytime_message .daytime-icon-badge.evening {
  background: #f0eefe !important;
}

body.night-mode .daytime_message .daytime-icon-badge {
  background: #3a3b3c !important;
}

.daytime_message .daytime-content {
  flex: 1 !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  line-height: 1.25 !important;
}

.daytime_message .daytime-title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #050505 !important;
}

body.night-mode .daytime_message .daytime-title {
  color: #e4e6eb !important;
}

.daytime_message .daytime-text {
  font-size: 12px !important;
  color: #65676b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 1px !important;
}

body.night-mode .daytime_message .daytime-text {
  color: #b0b3b8 !important;
}

.daytime_message .btn-close {
  width: 24px !important;
  height: 24px !important;
  padding: 0 !important;
  background-size: 9px !important;
  border-radius: 50% !important;
  opacity: 0.55 !important;
  margin: 0 !important;
  margin-left: auto !important;
  border: none !important;
  transition: opacity 0.15s ease, background-color 0.15s ease !important;
}

html[dir="RTL"] .daytime_message .btn-close {
  margin-left: 0 !important;
  margin-right: auto !important;
}

.daytime_message .btn-close:hover {
  opacity: 1 !important;
  background-color: #f0f2f5 !important;
}

body.night-mode .daytime_message .btn-close:hover {
  background-color: #3a3b3c !important;
}

/* On mobile: keep it ultra-compact */
@media (max-width: 767px) {
  .daytime_message {
    padding: 6px 12px !important;
    gap: 10px !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-radius: 0 !important;
    border-left: 3px solid #fba540 !important;
    border-right: none !important;
  }

  .daytime_message .daytime-icon-badge {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
  }

  .daytime_message .daytime-title {
    font-size: 12.5px !important;
  }

  .daytime_message .daytime-text {
    font-size: 11.5px !important;
  }
}

/* ==========================================================================
   People Page - Compact Advanced Search Card
   ========================================================================== */
.ds-people-search-card {
  position: sticky !important;
  top: 68px !important;
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .ds-people-search-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.ds-people-search-card .card-header {
  padding: 8px 14px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  background: transparent !important;
  border-bottom: 1px solid #ced0d4 !important;
  display: flex !important;
  align-items: center !important;
}

body.night-mode .ds-people-search-card .card-header {
  color: #e4e6eb !important;
  border-bottom-color: #3e4042 !important;
}

.ds-people-search-card .card-body {
  padding: 10px 12px !important;
}

.ds-people-search-form .form-label {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  margin-bottom: 2px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.night-mode .ds-people-search-form .form-label {
  color: #b0b3b8 !important;
}

.ds-people-search-form .form-control,
.ds-people-search-form .form-select {
  height: 32px !important;
  min-height: 32px !important;
  padding: 4px 8px !important;
  font-size: 12.5px !important;
  border-radius: 6px !important;
  border: 1px solid #ced0d4 !important;
  background-color: #f0f2f5 !important;
  color: #050505 !important;
  transition: all 0.15s ease !important;
}

.ds-people-search-form .form-control:focus,
.ds-people-search-form .form-select:focus {
  background-color: #ffffff !important;
  border-color: #1877f2 !important;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2) !important;
  outline: none !important;
}

body.night-mode .ds-people-search-form .form-control,
body.night-mode .ds-people-search-form .form-select {
  background-color: #3a3b3c !important;
  border-color: #3e4042 !important;
  color: #e4e6eb !important;
}

body.night-mode .ds-people-search-form .form-control:focus,
body.night-mode .ds-people-search-form .form-select:focus {
  background-color: #242526 !important;
  border-color: #2d88ff !important;
}

.ds-people-search-btn {
  height: 34px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  background-color: #1877f2 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  color: #fff !important;
  transition: background-color 0.15s ease !important;
}

.ds-people-search-btn:hover {
  background-color: #166fe5 !important;
  color: #fff !important;
}

/* ==========================================================================
   Single Blog / Article Page (Editorial Facebook Design)
   ========================================================================== */
.ds-article-reading-inner {
  width: 100% !important;
  max-width: 1200px !important;
}

.ds-article-reading-inner>.row {
  align-items: flex-start !important;
}

.ds-article-card {
  background: #ffffff !important;
  border: 1px solid #ced0d4 !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  overflow: hidden !important;
}

body.night-mode .ds-article-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.ds-article-card .post-footer {
  border-top: 1px solid #e4e6eb !important;
  padding: 16px 24px !important;
  background: transparent !important;
}

body.night-mode .ds-article-card .post-footer {
  border-top-color: #3e4042 !important;
}

@media (max-width: 767px) {
  .ds-article-card .post-footer {
    padding: 12px 14px !important;
  }
}

.ds-article-wrapper {
  padding: 24px 28px !important;
}

@media (max-width: 767px) {
  .ds-article-wrapper {
    padding: 16px 14px !important;
  }
}

/* Top Breadcrumb & Action */
.ds-article-top-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
}

.ds-article-breadcrumbs {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.ds-article-crumb {
  color: #65676b !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.ds-article-crumb:hover {
  color: #1877f2 !important;
}

.ds-article-crumb-active {
  color: #1877f2 !important;
  font-weight: 700 !important;
}

.ds-article-crumb-sep {
  color: #8a8d91 !important;
  font-weight: bold !important;
}

body.night-mode .ds-article-crumb {
  color: #b0b3b8 !important;
}

body.night-mode .ds-article-crumb:hover,
body.night-mode .ds-article-crumb-active {
  color: #2d88ff !important;
}

.ds-article-edit-btn {
  background: #e4e6eb !important;
  color: #050505 !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  border-radius: 6px !important;
  padding: 4px 10px !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
}

.ds-article-edit-btn:hover {
  background: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .ds-article-edit-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .ds-article-edit-btn:hover {
  background: #4e4f50 !important;
}

/* Headline */
.ds-article-title {
  font-size: 27px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  color: #050505 !important;
  margin: 8px 0 16px 0 !important;
  letter-spacing: -0.2px !important;
}

@media (max-width: 767px) {
  .ds-article-title {
    font-size: 21px !important;
  }
}

body.night-mode .ds-article-title {
  color: #e4e6eb !important;
}

/* Author & Meta Bar */
.ds-article-author-bar {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  padding-bottom: 16px !important;
  margin-bottom: 20px !important;
  border-bottom: 1px solid #e4e6eb !important;
}

body.night-mode .ds-article-author-bar {
  border-bottom-color: #3e4042 !important;
}

.ds-article-author-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ds-article-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.ds-article-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ds-article-author-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.ds-article-author-name-line {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.ds-article-author-name {
  font-size: 14.5px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  transition: color 0.15s ease !important;
}

.ds-article-author-name:hover {
  color: #1877f2 !important;
}

body.night-mode .ds-article-author-name {
  color: #e4e6eb !important;
}

.ds-article-post-details {
  font-size: 12px !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

body.night-mode .ds-article-post-details {
  color: #b0b3b8 !important;
}

.ds-article-author-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ds-article-stat-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 4px 10px !important;
  background: #f0f2f5 !important;
  border-radius: 16px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
}

.ds-article-stat-badge:hover {
  background: #e4e6eb !important;
  color: #050505 !important;
}

body.night-mode .ds-article-stat-badge {
  background: #3a3b3c !important;
  color: #b0b3b8 !important;
}

body.night-mode .ds-article-stat-badge:hover {
  background: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* Cover Image */
.ds-article-cover-box {
  margin: 0 0 24px 0 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  max-height: 460px !important;
  background-color: #000 !important;
}

.ds-article-cover-img {
  width: 100% !important;
  height: auto !important;
  max-height: 460px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Article Editorial Content */
.ds-article-content {
  font-size: 16.5px !important;
  line-height: 1.75 !important;
  color: #1c1e21 !important;
  word-wrap: break-word !important;
  font-family: var(--ds-font-sans), system-ui, -apple-system, sans-serif !important;
}

body.night-mode .ds-article-content {
  color: #e4e6eb !important;
}

.ds-article-content p {
  margin-bottom: 20px !important;
}

.ds-article-content h1,
.ds-article-content h2,
.ds-article-content h3,
.ds-article-content h4 {
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 30px 0 14px 0 !important;
  line-height: 1.35 !important;
}

body.night-mode .ds-article-content h1,
body.night-mode .ds-article-content h2,
body.night-mode .ds-article-content h3,
body.night-mode .ds-article-content h4 {
  color: #e4e6eb !important;
}

.ds-article-content blockquote {
  border-left: 4px solid #1877f2 !important;
  background: #f0f2f5 !important;
  padding: 14px 20px !important;
  margin: 22px 0 !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: #65676b !important;
}

body.night-mode .ds-article-content blockquote {
  background: #3a3b3c !important;
  color: #b0b3b8 !important;
  border-left-color: #2d88ff !important;
}

.ds-article-content a {
  color: #1877f2 !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

.ds-article-content a:hover {
  text-decoration: underline !important;
}

body.night-mode .ds-article-content a {
  color: #2d88ff !important;
}

.ds-article-content img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: 8px !important;
  margin: 16px 0 !important;
}

.ds-article-content iframe,
.ds-article-content video {
  max-width: 100% !important;
  border-radius: 8px !important;
}

/* Tags */
.ds-article-tags {
  margin-top: 24px !important;
  padding-top: 16px !important;
  border-top: 1px solid #e4e6eb !important;
}

body.night-mode .ds-article-tags {
  border-top-color: #3e4042 !important;
}

.ds-article-tags ul {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ds-article-tags li a {
  display: inline-block !important;
  padding: 4px 12px !important;
  background: #f0f2f5 !important;
  color: #1877f2 !important;
  border-radius: 16px !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
}

.ds-article-tags li a:hover {
  background: #e4e6eb !important;
}

body.night-mode .ds-article-tags li a {
  background: #3a3b3c !important;
  color: #2d88ff !important;
}

body.night-mode .ds-article-tags li a:hover {
  background: #4e4f50 !important;
}

/* References */
.ds-article-references {
  margin-top: 24px !important;
  padding: 16px 20px !important;
  background: #f0f2f5 !important;
  border-radius: 8px !important;
}

body.night-mode .ds-article-references {
  background: #3a3b3c !important;
}

.ds-article-references .blog-references-heading {
  font-size: 14px !important;
  font-weight: 700 !important;
  margin-bottom: 10px !important;
  color: #050505 !important;
}

body.night-mode .ds-article-references .blog-references-heading {
  color: #e4e6eb !important;
}

.ds-article-references .blog-references-list {
  margin: 0 !important;
  padding-left: 20px !important;
}

.ds-article-references .blog-references-link {
  font-size: 13px !important;
  color: #1877f2 !important;
  text-decoration: none !important;
}

.ds-article-references .blog-references-link:hover {
  text-decoration: underline !important;
}

/* Right Sidebar in Blogs */
@media (min-width: 992px) {
  .ds-blog-sidebar {
    position: sticky !important;
    top: 68px !important;
  }
}

.ds-article-write-btn {
  height: 38px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  border-radius: 6px !important;
  background-color: #1877f2 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #fff !important;
  transition: background-color 0.15s ease !important;
}

.ds-article-write-btn:hover {
  background-color: #166fe5 !important;
  color: #fff !important;
}

.ds-article-categories-cloud {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.ds-article-category-pill {
  display: inline-block !important;
  padding: 5px 12px !important;
  background: #f0f2f5 !important;
  color: #050505 !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.15s ease !important;
}

.ds-article-category-pill:hover {
  background: #e4e6eb !important;
  color: #1877f2 !important;
}

body.night-mode .ds-article-category-pill {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .ds-article-category-pill:hover {
  background: #4e4f50 !important;
  color: #2d88ff !important;
}

/* Sidebar "Read More" post cards */
.ds-blog-sidebar .post-media.list {
  background: transparent !important;
  border: none !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  margin-bottom: 8px !important;
  transition: background 0.15s ease !important;
}

.ds-blog-sidebar .post-media.list:hover {
  background: #f0f2f5 !important;
}

body.night-mode .ds-blog-sidebar .post-media.list:hover {
  background: #3a3b3c !important;
}

.ds-blog-sidebar .post-media-image-wrapper {
  border-radius: 6px !important;
  overflow: hidden !important;
}

.ds-blog-sidebar .post-media-meta .title {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  line-height: 1.35 !important;
  margin-bottom: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.night-mode .ds-blog-sidebar .post-media-meta .title {
  color: #e4e6eb !important;
}

.ds-blog-sidebar .post-media-meta .text {
  font-size: 12px !important;
  color: #65676b !important;
  line-height: 1.4 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  margin-bottom: 4px !important;
}

body.night-mode .ds-blog-sidebar .post-media-meta .text {
  color: #b0b3b8 !important;
}

.ds-blog-sidebar .post-media-meta .info {
  font-size: 11px !important;
  color: #8a8d91 !important;
}

body.night-mode .ds-blog-sidebar .post-media-meta .info {
  color: #8a8d91 !important;
}

/* ==========================================================================
   Blog Article — Full-Width Layout
   Desktop: hide left sidebar + remove margin-left
   Mobile:  full-screen edge-to-edge article
   ========================================================================== */

/* Desktop: hide left sidebar */
@media (min-width: 992px) {
  .fb-blog-article>aside.sg-offcanvas-sidebar {
    display: none !important;
  }

  .fb-blog-article>.sg-offcanvas-mainbar {
    margin-left: 0 !important;
  }
}

/* Hide bottom footer links on internal app pages */
body.people .fb-auth-footer,
body.friends .fb-auth-footer,
body.groups .fb-auth-footer,
body.group .fb-auth-footer,
body.pages .fb-auth-footer,
body.page .fb-auth-footer,
body.events .fb-auth-footer,
body.event .fb-auth-footer,
body.blogs .fb-auth-footer,
body.article .fb-auth-footer,
body.post .fb-auth-footer,
body.jobs .fb-auth-footer,
body.offers .fb-auth-footer,
body.saved .fb-auth-footer,
body.memories .fb-auth-footer,
body.wallet .fb-auth-footer,
body.admin .fb-auth-footer,
body.settings .fb-auth-footer,
body.messages .fb-auth-footer,
body.notifications .fb-auth-footer,
body.search .fb-auth-footer,
.modal .fb-auth-footer {
  display: none !important;
}

/* Mobile: full-screen article */
@media (max-width: 991.98px) {
  .fb-blog-article>aside.sg-offcanvas-sidebar {
    display: none !important;
  }

  .fb-blog-article>.sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .fb-blog-article .ds-article-reading-inner {
    max-width: 100% !important;
    padding: 0 !important;
  }

  .fb-blog-article .ds-article-reading-inner>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .fb-blog-article .ds-article-card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    box-shadow: none !important;
  }

  body.night-mode .fb-blog-article .ds-article-card {
    box-shadow: none !important;
  }
}

/* ==========================================================================
   Mobile Smart Header (Hide on Scroll Down, Show on Scroll Up)
   ========================================================================== */
@media (max-width: 767px) {
  .main-header {
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    border-radius: 0 !important;
  }

  .main-header.header-hidden {
    transform: translateY(-100%) !important;
    box-shadow: none !important;
  }

  body.mob-menu-open .main-header {
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   Facebook Modern Publisher Box (Single-Row Collapsed Pill & Full Expanded)
   ========================================================================== */

/* Base container styling */
#publisher-box {
  background: var(--card-bg, #ffffff);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

body.night-mode #publisher-box {
  background: #242526;
  border-color: rgba(255, 255, 255, 0.08);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* --- Collapsed (Unfocused) State matching User's Screenshot --- */
body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) {
  padding: 12px 16px !important;
}

body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .publisher-message {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
}

body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .publisher-avatar {
  position: static !important;
  inset: auto !important;
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Pill trigger button */
body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  background-color: #f0f2f5 !important;
  border-radius: 50px !important;
  padding: 0 16px !important;
  display: flex !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
  overflow: hidden !important;
  position: relative !important;
  box-sizing: border-box !important;
}

body.night-mode:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper {
  background-color: #3a3b3c !important;
}

body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper:hover {
  background-color: #e4e6e9 !important;
}

body.night-mode:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper:hover {
  background-color: #4e4f50 !important;
}

/* Quill text in pill */
body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor {
  min-height: 40px !important;
  height: 40px !important;
  min-width: 0 !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor .ql-editor {
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  line-height: 40px !important;
  height: 40px !important;
  max-height: 40px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  cursor: pointer !important;
}

body.night-mode:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor .ql-editor {
  color: #b0b3b8 !important;
}

body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor .ql-editor.ql-blank::before {
  left: 0 !important;
  right: auto !important;
  top: 0 !important;
  bottom: 0 !important;
  font-style: normal !important;
  color: #65676b !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 40px !important;
  pointer-events: none !important;
}

html[dir="RTL"] body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor .ql-editor.ql-blank::before {
  left: auto !important;
  right: 0 !important;
}

body.night-mode:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper .quill-editor .ql-editor.ql-blank::before {
  color: #b0b3b8 !important;
}

/* 3 Quick Action Icons (Live, Photos, Reels) */
.publisher-quick-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.publisher-focus .publisher-quick-actions,
#publisher-box[data-modal-mode="true"] .publisher-quick-actions {
  display: none !important;
}

.publisher-quick-action-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  position: relative !important;
  text-decoration: none !important;
  flex-shrink: 0 !important;
}

.publisher-quick-action-btn:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  transform: scale(1.08) !important;
}

body.night-mode .publisher-quick-action-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.publisher-quick-action-btn .svg-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
}

.publisher-quick-action-btn .svg-container svg,
.publisher-quick-action-btn svg {
  width: 24px !important;
  height: 24px !important;
  display: block !important;
}

/* --- Expanded / Focused State --- */
body.publisher-focus #publisher-box {
  padding: 16px;
  border-radius: 16px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

body.publisher-focus #publisher-box .publisher-message {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
}

body.publisher-focus #publisher-box .publisher-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

body.publisher-focus #publisher-box .colored-text-wrapper {
  flex: 1;
  min-width: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
  height: auto;
  min-height: 70px;
  max-height: none;
  cursor: text;
}

body.publisher-focus #publisher-box .quill-editor {
  min-height: 70px;
}

body.publisher-focus #publisher-box .quill-editor .ql-editor {
  padding: 8px 0;
  font-size: 1.1rem;
  line-height: 1.4;
  height: auto;
  max-height: none;
  white-space: pre-wrap;
  cursor: text;
}

body.publisher-focus #publisher-box .quill-editor .ql-editor.ql-blank::before {
  line-height: 1.4;
  font-size: 1.1rem;
  top: 8px;
}

/* Mobile adjustments */
@media (max-width: 576px) {
  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) {
    padding: 10px 12px;
    border-radius: 12px;
  }

  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .publisher-message {
    gap: 8px;
  }

  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .publisher-avatar {
    width: 36px;
    height: 36px;
  }

  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .colored-text-wrapper {
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 12px;
  }

  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .quill-editor .ql-editor,
  body:not(.publisher-focus) #publisher-box:not([data-modal-mode="true"]) .quill-editor .ql-editor.ql-blank::before {
    font-size: 13.5px;
    line-height: 36px;
  }

  .publisher-quick-actions {
    gap: 4px;
  }

  .publisher-quick-action-btn {
    width: 32px;
    height: 32px;
  }

  .publisher-quick-action-btn .svg-container,
  .publisher-quick-action-btn .svg-container svg {
    width: 24px !important;
    height: 24px !important;
  }
}

/* ==========================================================================
   DIRECTORY PAGE (ANNUAIRE) - MODERN FACEBOOK REDESIGN
   ========================================================================== */

/* Directory Hero Banner */
.directory-hero-banner {
  background: #ffffff;
  border-bottom: 1px solid #e4e6eb;
  padding: 24px 0 18px 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

body.night-mode .directory-hero-banner {
  background: #242526;
  border-bottom-color: #3e4042;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.directory-hero-inner {
  display: flex;
  flex-direction: column;
}

.directory-hero-main {
  display: flex;
  align-items: center;
  gap: 16px;
}

.directory-hero-icon-box {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(24, 119, 242, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

body.night-mode .directory-hero-icon-box {
  background: rgba(24, 119, 242, 0.16);
}

.directory-hero-title {
  font-size: 24px;
  font-weight: 700;
  color: #1c1e21;
  margin: 0;
  line-height: 1.2;
}

body.night-mode .directory-hero-title {
  color: #e4e6eb;
}

.directory-hero-subtitle {
  font-size: 14px;
  color: #65676b;
  margin: 4px 0 0 0;
}

body.night-mode .directory-hero-subtitle {
  color: #b0b3b8;
}

/* Quick Pills Bar */
.directory-pills-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
}

body.night-mode .directory-pills-bar {
  border-top-color: #3a3b3c;
}

.directory-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13.5px;
  font-weight: 600;
  color: #65676b;
  background: #f0f2f5;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
  border: 1px solid transparent;
}

.directory-pill:hover {
  background: #e4e6eb;
  color: #050505;
  transform: translateY(-1px);
}

body.night-mode .directory-pill {
  background: #3a3b3c;
  color: #b0b3b8;
}

body.night-mode .directory-pill:hover {
  background: #4e4f50;
  color: #ffffff;
}

.directory-pill.active {
  background: #1877f2 !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(24, 119, 242, 0.3);
}

.directory-pill .pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

/* Compact Hero for Sub-views */
.directory-hero-compact {
  padding: 16px 0 12px 0;
}

.directory-hero-compact .directory-hero-title {
  font-size: 20px;
}

.directory-hero-compact .directory-hero-icon-box {
  width: 44px;
  height: 44px;
}

.directory-hero-compact .directory-pills-bar {
  margin-top: 12px;
  padding-top: 12px;
}

/* Directory Hub Grid */
.directory-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 20px !important;
}

@media (min-width: 1300px) {
  .directory-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
}

@media (max-width: 991px) {
  .directory-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px !important;
  }
}

@media (max-width: 575px) {
  .directory-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* Directory Hub Card */
.directory-hub-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 16px !important;
  padding: 22px !important;
  min-height: 175px !important;
  text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.25s cubic-bezier(0.2, 0, 0, 1), border-color 0.25s ease !important;
  position: relative !important;
  overflow: hidden !important;
}

.directory-hub-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.09) !important;
  border-color: rgba(24, 119, 242, 0.4) !important;
}

body.night-mode .directory-hub-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
}

body.night-mode .directory-hub-card:hover {
  border-color: rgba(24, 119, 242, 0.6) !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
}

.dir-card-top {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.dir-card-icon-wrap {
  width: 54px !important;
  height: 54px !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
}

.directory-hub-card:hover .dir-card-icon-wrap {
  transform: scale(1.08) !important;
}

.dir-card-arrow {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: #f0f2f5 !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.25s cubic-bezier(0.2, 0, 0, 1) !important;
}

body.night-mode .dir-card-arrow {
  background: #3a3b3c !important;
  color: #b0b3b8 !important;
}

.directory-hub-card:hover .dir-card-arrow {
  background: #1877f2 !important;
  color: #ffffff !important;
  transform: translateX(3px) !important;
}

html[dir="RTL"] .directory-hub-card:hover .dir-card-arrow {
  transform: translateX(-3px) !important;
}

html[dir="RTL"] .dir-card-arrow svg {
  transform: rotate(180deg) !important;
}

.dir-card-title {
  font-size: 17px !important;
  font-weight: 700 !important;
  margin: 0 0 6px 0 !important;
  color: #1c1e21 !important;
  line-height: 1.3 !important;
  transition: color 0.15s ease !important;
}

body.night-mode .dir-card-title {
  color: #e4e6eb !important;
}

.directory-hub-card:hover .dir-card-title {
  color: #1877f2 !important;
}

.dir-card-desc {
  font-size: 13.5px !important;
  line-height: 1.45 !important;
  color: #65676b !important;
  margin: 0 !important;
}

body.night-mode .dir-card-desc {
  color: #b0b3b8 !important;
}

/* Sub-views Sidebar */
.directory-sidebar-box {
  background: #ffffff !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .directory-sidebar-box {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.directory-sidebar-head {
  padding: 14px 16px !important;
  border-bottom: 1px solid #f0f2f5 !important;
}

body.night-mode .directory-sidebar-head {
  border-bottom-color: #3a3b3c !important;
}

.directory-sidebar-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  margin: 0 !important;
  color: #050505 !important;
}

body.night-mode .directory-sidebar-title {
  color: #e4e6eb !important;
}

.directory-sidebar-body {
  padding: 8px !important;
}

.directory-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.directory-nav-list li {
  margin-bottom: 2px !important;
}

.directory-nav-list li a {
  display: flex !important;
  align-items: center !important;
  padding: 9px 12px !important;
  border-radius: 8px !important;
  color: #050505 !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

body.night-mode .directory-nav-list li a {
  color: #e4e6eb !important;
}

.directory-nav-list li a:hover {
  background: #f0f2f5 !important;
}

body.night-mode .directory-nav-list li a:hover {
  background: #3a3b3c !important;
}

.directory-nav-list li.active a {
  background: rgba(24, 119, 242, 0.1) !important;
  color: #1877f2 !important;
  font-weight: 600 !important;
}

body.night-mode .directory-nav-list li.active a {
  background: rgba(24, 119, 242, 0.2) !important;
  color: #4599ff !important;
}

/* Sub-views Results Card */
.directory-results-card {
  background: #ffffff !important;
  border: 1px solid #e4e6eb !important;
  border-radius: 12px !important;
  padding: 16px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .directory-results-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.directory-list-view {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.directory-pagination {
  margin-top: 16px !important;
  display: flex !important;
  justify-content: center !important;
}

/* ============================================================
   FACEBOOK DESKTOP ACCOUNT PROFILE DROPDOWN MENU (1:1 FACEBOOK)
   ============================================================ */

/* Avatar button in navbar with circular badge overlay */
.fb-hright .user-menu.fb-user-menu-btn {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  margin: 0 !important;
  transition: filter 0.15s ease, background 0.15s ease;
  background: transparent !important;
}

.fb-hright .user-menu.fb-user-menu-btn::after {
  display: none !important;
  /* hide default bootstrap caret */
}

.fb-hright .user-menu.fb-user-menu-btn>img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  transition: filter 0.15s ease;
}

.fb-hright .user-menu.fb-user-menu-btn:hover>img,
.fb-hright .user-menu.fb-user-menu-btn.show>img {
  filter: brightness(0.92);
}

.fb-user-menu-arrow {
  position: absolute;
  bottom: -1px;
  right: -1px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #e4e6eb;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  transition: transform 0.15s ease;
}

[dir="RTL"] .fb-user-menu-arrow {
  right: auto;
  left: -1px;
}

body.night-mode .fb-user-menu-arrow {
  background: #3a3b3c;
  border-color: #242526;
  color: #e4e6eb;
}

/* Dropdown Container */
.fb-account-dropdown,
.fb-account-dropdown div:not([class*="fa"]),
.fb-account-dropdown span:not([class*="fa"]),
.fb-account-dropdown a:not([class*="fa"]),
.fb-account-dropdown button:not([class*="fa"]),
.fb-account-title,
.fb-account-desc,
.fb-profile-switch-name,
.fb-profile-switch-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fb-account-dropdown i,
.fb-account-dropdown [class*="fa-"],
.fb-account-dropdown .fa,
.fb-account-dropdown .fas,
.fb-account-dropdown .far,
.fb-account-dropdown .fab {
  font-family: var(--_fa-family, "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome") !important;
}

.fb-account-dropdown {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  max-height: calc(100vh - 68px) !important;
  padding: 12px 8px 8px 8px !important;
  margin-top: 8px !important;
  margin-right: 8px !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  z-index: 1050 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

[dir="RTL"] .fb-account-dropdown {
  margin-right: 0 !important;
  margin-left: 8px !important;
}

.fb-account-dropdown::-webkit-scrollbar {
  width: 6px;
}

.fb-account-dropdown::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

body.night-mode .fb-account-dropdown::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

body.night-mode .fb-account-dropdown {
  background: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.3) !important;
  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

/* Profile Box & Header Card (Faithful to pc feed.JPG) */
.fb-account-profile-box {
  background: #ffffff !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 4px !important;
  margin: 0 4px 10px 4px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.night-mode .fb-account-profile-box {
  background: #242526 !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4) !important;
}

.fb-profile-switch-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  color: #050505 !important;
  transition: background 0.12s ease !important;
  cursor: pointer !important;
}

.fb-profile-switch-row:hover,
.fb-profile-switch-row:focus {
  background: #f0f2f5 !important;
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-profile-switch-row {
  color: #e4e6eb !important;
}

body.night-mode .fb-profile-switch-row:hover,
body.night-mode .fb-profile-switch-row:focus {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-profile-switch-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fb-profile-switch-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: inherit !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
}

.fb-profile-switch-divider {
  height: 1px !important;
  background: #e4e6eb !important;
  margin: 6px 8px !important;
}

body.night-mode .fb-profile-switch-divider {
  background: #3e4042 !important;
}

.fb-profile-switch-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 36px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  border-radius: 6px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  margin-top: 2px !important;
}

.fb-profile-switch-btn:hover {
  background: #d8dadf !important;
}

body.night-mode .fb-profile-switch-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-profile-switch-btn:hover {
  background: #4e4f50 !important;
}

.fb-profile-switch-btn-icon {
  font-size: 14px !important;
}

.fb-account-external {
  color: #65676b !important;
  flex-shrink: 0 !important;
}

body.night-mode .fb-account-external {
  color: #b0b3b8 !important;
}

/* Divider */
.fb-account-divider {
  height: 1px;
  background: #ced0d4;
  margin: 6px 0;
  opacity: 0.7;
}

body.night-mode .fb-account-divider {
  background: #393a3b;
  opacity: 1;
}

/* Menu items list */
.fb-account-menu-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fb-account-menu-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #050505 !important;
  transition: background 0.15s ease !important;
  position: relative !important;
  user-select: none !important;
}

body.night-mode .fb-account-menu-item {
  color: #e4e6eb !important;
}

.fb-account-menu-item:hover {
  background: #f0f2f5 !important;
  text-decoration: none !important;
}

body.night-mode .fb-account-menu-item:hover {
  background: #3a3b3c !important;
}

/* Left Icon Container - Facebook 36px circle */
.fb-account-icon-wrap {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  color: #050505 !important;
  transition: background 0.15s ease;
}

body.night-mode .fb-account-icon-wrap {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-account-icon-wrap svg,
.fb-account-icon-wrap .svg-container {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Distinct icon colors for Pro / Admin */
.fb-icon-pro {
  background: linear-gradient(135deg, #ffd700, #ff9800) !important;
  color: #ffffff !important;
}

.fb-icon-admin {
  background: #e7f3ff !important;
  color: #1877f2 !important;
}

body.night-mode .fb-icon-admin {
  background: #19365e !important;
  color: #4599ff !important;
}

/* Text wrap */
.fb-account-text-wrap {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.fb-account-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.3 !important;
}

body.night-mode .fb-account-title {
  color: #e4e6eb !important;
}

.fb-account-desc {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  margin-top: 1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.night-mode .fb-account-desc {
  color: #b0b3b8 !important;
}

/* Right Chevron Arrow */
.fb-account-chevron {
  color: #65676b !important;
  flex-shrink: 0 !important;
  opacity: 0.8 !important;
  transition: transform 0.15s ease !important;
}

[dir="RTL"] .fb-account-chevron {
  transform: rotate(180deg) !important;
}

body.night-mode .fb-account-chevron {
  color: #b0b3b8 !important;
}

/* Badges */
.fb-account-badge {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  border-radius: 12px !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

.fb-badge-points {
  background: #e7f3ff !important;
  color: #1877f2 !important;
}

body.night-mode .fb-badge-points {
  background: #19365e !important;
  color: #4599ff !important;
}

.fb-badge-wallet {
  background: #e4f7e8 !important;
  color: #2e7d32 !important;
}

body.night-mode .fb-badge-wallet {
  background: #1c3b24 !important;
  color: #66bb6a !important;
}

.fb-badge-lang {
  background: #f0f2f5 !important;
  color: #050505 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  border: 1px solid #e4e6eb !important;
}

body.night-mode .fb-badge-lang {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
  border-color: #4e4f50 !important;
}

/* Facebook-style Language Switcher Modal Grid */
.fb-lang-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
}

.fb-lang-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  border: 1px solid #e4e6eb;
  background: #ffffff;
  color: #050505;
  text-decoration: none !important;
  transition: all 0.15s ease;
  position: relative;
}

.fb-lang-item:hover {
  background: #f0f2f5;
  border-color: #ced0d4;
  color: #050505;
}

.fb-lang-item.active {
  background: #e7f3ff;
  border-color: #1877f2;
  color: #1877f2;
  font-weight: 600;
}

.fb-lang-flag {
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-shrink: 0;
}

.fb-lang-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fb-lang-title {
  font-size: 15px;
  font-weight: inherit;
  line-height: 1.2;
}

.fb-lang-code {
  font-size: 11px;
  color: #65676b;
  margin-top: 2px;
}

.fb-lang-item.active .fb-lang-code {
  color: #1877f2;
  opacity: 0.85;
}

.fb-lang-check {
  color: #1877f2;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

body.night-mode .fb-lang-item {
  background: #242526;
  border-color: #3e4042;
  color: #e4e6eb;
}

body.night-mode .fb-lang-item:hover {
  background: #3a3b3c;
  border-color: #505254;
  color: #e4e6eb;
}

body.night-mode .fb-lang-item.active {
  background: #19365e;
  border-color: #4599ff;
  color: #4599ff;
}

body.night-mode .fb-lang-code {
  color: #b0b3b8;
}

body.night-mode .fb-lang-item.active .fb-lang-code,
body.night-mode .fb-lang-check {
  color: #4599ff;
}

/* Day/Night switch pill indicator */
.fb-account-switch-pill {
  width: 38px;
  height: 22px;
  border-radius: 12px;
  background: #ced0d4;
  position: relative;
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.fb-account-switch-pill::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.2s ease;
}

[dir="RTL"] .fb-account-switch-pill::after {
  left: auto;
  right: 2px;
}

.fb-account-switch-pill.active {
  background: #1877f2;
}

.fb-account-switch-pill.active::after {
  transform: translateX(16px);
}

[dir="RTL"] .fb-account-switch-pill.active::after {
  transform: translateX(-16px);
}

body.night-mode .fb-account-switch-pill {
  background: #3a3b3c;
}

body.night-mode .fb-account-switch-pill.active {
  background: #1877f2;
}

/* Logout item */
.fb-logout-item:hover {
  background: #f0f2f5 !important;
}

body.night-mode .fb-logout-item:hover {
  background: #3a3b3c !important;
}

/* Footer Legal Links */
.fb-account-footer {
  padding: 8px 10px 4px 10px;
  font-size: 11px;
  color: #65676b;
  line-height: 1.5;
}

body.night-mode .fb-account-footer {
  color: #b0b3b8;
}

.fb-account-footer a {
  color: #65676b;
  text-decoration: none;
}

body.night-mode .fb-account-footer a {
  color: #b0b3b8;
}

.fb-account-footer a:hover {
  text-decoration: underline;
}

/* Mobile compact responsiveness for .fb-account-dropdown */
@media (max-width: 767.98px) {
  .fb-account-dropdown {
    width: min(340px, calc(100vw - 16px)) !important;
    min-width: 0 !important;
    max-width: calc(100vw - 16px) !important;
    max-height: calc(100vh - 65px) !important;
    max-height: calc(100dvh - 65px) !important;
    padding: 6px !important;
    margin-top: 6px !important;
    margin-right: 6px !important;
  }

  [dir="RTL"] .fb-account-dropdown {
    margin-right: 0 !important;
    margin-left: 6px !important;
  }

  .fb-account-profile-card {
    padding: 6px 8px !important;
    gap: 10px !important;
  }

  .fb-account-avatar {
    width: 46px !important;
    height: 46px !important;
  }

  .fb-account-name {
    font-size: 15px !important;
  }

  .fb-account-menu-group {
    gap: 1px !important;
  }

  .fb-account-menu-item {
    padding: 6px 8px !important;
    gap: 10px !important;
    border-radius: 6px !important;
  }

  .fb-account-icon-wrap {
    width: 32px !important;
    height: 32px !important;
  }

  .fb-account-icon-wrap svg,
  .fb-account-icon-wrap .svg-container {
    width: 17px !important;
    height: 17px !important;
  }

  .fb-account-title {
    font-size: 13.5px !important;
  }

  .fb-account-desc {
    font-size: 11px !important;
  }
}

/* ============================================================
   SUPPORT CENTER PAGE — Watch-style DS Design System
   (matches Watch / People / Groups pages aesthetic)
   ============================================================ */

/* ---- ds-section-header (shared across Watch-style pages) ---- */
.ds-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 16px;
}

.ds-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 1.1875rem;
  font-weight: 700;
  color: var(--ds-text-primary);
}

.ds-section-action {
  flex-shrink: 0;
}

/* ---- Shared DS card base ---- */
.ds-card {
  background: var(--ds-surface-el);
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  overflow: hidden;
}

.ds-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ds-text-primary);
  background: var(--ds-surface-sec);
}

.ds-card-head i {
  color: var(--ds-primary);
}

/* ---- Support two-column layout ---- */
.ds-support-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.ds-support-ticket-layout {
  /* same flex layout for ticket view */
}

.ds-support-aside {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 72px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ds-support-main-col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 991.98px) {
  .ds-support-layout {
    flex-direction: column;
  }

  .ds-support-aside {
    width: 100%;
    position: static;
  }
}

/* ---- Stats card (sidebar) ---- */
.ds-support-stats-card {
  /* inherits ds-card */
}

.ds-support-stat-list {
  display: flex;
  flex-direction: column;
}

.ds-support-stat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background var(--ds-transition);
  position: relative;
}

.ds-support-stat-row:hover {
  background: var(--ds-surface-sec);
  text-decoration: none;
  color: var(--ds-text-primary);
}

.ds-support-stat-row.active {
  background: rgba(24, 119, 242, 0.08);
  color: var(--ds-primary);
  font-weight: 700;
}

.ds-support-stat-row.active::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--ds-primary);
  border-radius: 0 3px 3px 0;
}

[dir="RTL"] .ds-support-stat-row.active::before {
  border-radius: 3px 0 0 3px;
}

.ds-support-stat-label {
  flex: 1;
}

.ds-support-stat-num {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: var(--ds-radius-full);
  background: var(--ds-surface-base);
  color: var(--ds-text-secondary);
}

.ds-support-stat-num.warn {
  background: #fef3c7;
  color: #b45309;
}

.ds-support-stat-num.info {
  background: #dbeafe;
  color: #2563eb;
}

.ds-support-stat-num.primary {
  background: #e7f3ff;
  color: var(--ds-primary);
}

.ds-support-stat-num.success {
  background: #d1fae5;
  color: #059669;
}

.ds-support-stat-num.danger {
  background: #fee2e2;
  color: #dc2626;
}

body.night-mode .ds-support-stat-num.warn {
  background: #451a03;
  color: #fbbf24;
}

body.night-mode .ds-support-stat-num.info {
  background: #1e3a5f;
  color: #93c5fd;
}

body.night-mode .ds-support-stat-num.primary {
  background: #19365e;
  color: #60a5fa;
}

body.night-mode .ds-support-stat-num.success {
  background: #064e3b;
  color: #34d399;
}

body.night-mode .ds-support-stat-num.danger {
  background: #4c1d1d;
  color: #f87171;
}

.ds-support-stat-divider {
  height: 1px;
  background: var(--ds-border);
  margin: 2px 14px;
}

/* colored status dots */
.ds-support-stat-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.ds-support-stat-dot.in_progress {
  background: #2563eb;
}

.ds-support-stat-dot.opened {
  background: var(--ds-primary);
}

.ds-support-stat-dot.pending {
  background: #f59e0b;
}

.ds-support-stat-dot.solved {
  background: #10b981;
}

.ds-support-stat-dot.closed {
  background: #ef4444;
}

/* ---- Detail rows (ticket sidebar) ---- */
.ds-support-detail-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
}

.ds-support-detail-label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-text-tertiary);
}

.ds-support-time-sm {
  font-size: 0.8125rem;
  color: var(--ds-text-secondary);
}

/* ---- New ticket button ---- */
.ds-support-new-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: var(--ds-primary);
  color: #fff;
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--ds-transition), transform var(--ds-transition);
}

.ds-support-new-btn:hover {
  background: var(--ds-primary-hover);
  color: #fff;
  text-decoration: none;
  transform: translateY(-1px);
}

body.night-mode .ds-support-new-btn {
  color: #000;
}

/* ---- Back button ---- */
.ds-support-back-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--ds-surface-el);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-lg);
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ds-text-secondary);
  text-decoration: none;
  transition: background var(--ds-transition);
}

.ds-support-back-btn:hover {
  background: var(--ds-surface-sec);
  color: var(--ds-text-primary);
  text-decoration: none;
}

/* ---- Search bar (inherits ds-search-bar/ds-search-inner from Watch) ---- */
.ds-support-search {
  margin-bottom: 0;
}

.ds-support-search-hint {
  font-size: 0.875rem;
  color: var(--ds-text-secondary);
  margin: 0;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

/* ---- Tickets table card ---- */
.ds-support-table-card {
  overflow: hidden;
}

.ds-support-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  font-size: 0.875rem;
}

.ds-support-table thead th {
  padding: 11px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ds-text-tertiary);
  background: var(--ds-surface-sec);
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap;
}

.ds-support-table tbody td {
  padding: 11px 14px;
  vertical-align: middle;
  border-bottom: 1px solid var(--ds-border);
  color: var(--ds-text-primary);
}

.ds-support-table-row:last-child td {
  border-bottom: none;
}

.ds-support-table-row:hover td {
  background: var(--ds-surface-sec);
}

.ds-support-id {
  color: var(--ds-text-tertiary);
  font-weight: 600;
  font-size: 0.8125rem;
}

/* ---- User cell (avatar + name) ---- */
.ds-support-user {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: var(--ds-text-primary);
  font-weight: 500;
}

.ds-support-user img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.ds-support-user:hover {
  color: var(--ds-primary);
  text-decoration: none;
}

.ds-support-subject {
  color: var(--ds-text-primary);
  font-weight: 600;
  text-decoration: none;
}

.ds-support-subject:hover {
  color: var(--ds-primary);
  text-decoration: underline;
}

.ds-support-agent {
  font-size: 0.8125rem;
  color: var(--ds-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ds-support-time {
  color: var(--ds-text-tertiary);
  font-size: 0.8125rem;
  white-space: nowrap;
}

/* ---- Status badges ---- */
.ds-support-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--ds-radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
}

.ds-support-badge.opened {
  background: #e7f3ff;
  color: var(--ds-primary);
}

.ds-support-badge.in_progress {
  background: #dbeafe;
  color: #2563eb;
}

.ds-support-badge.pending {
  background: #fef3c7;
  color: #b45309;
}

.ds-support-badge.solved {
  background: #d1fae5;
  color: #059669;
}

.ds-support-badge.closed {
  background: #fee2e2;
  color: #dc2626;
}

.ds-support-badge.unassigned {
  background: var(--ds-surface-base);
  color: var(--ds-text-secondary);
  border: 1px solid var(--ds-border);
}

body.night-mode .ds-support-badge.opened {
  background: #19365e;
  color: #60a5fa;
}

body.night-mode .ds-support-badge.in_progress {
  background: #1e3a5f;
  color: #93c5fd;
}

body.night-mode .ds-support-badge.pending {
  background: #451a03;
  color: #fbbf24;
}

body.night-mode .ds-support-badge.solved {
  background: #064e3b;
  color: #34d399;
}

body.night-mode .ds-support-badge.closed {
  background: #4c1d1d;
  color: #f87171;
}

body.night-mode .ds-support-badge.unassigned {
  background: var(--ds-surface-sec);
  color: var(--ds-text-tertiary);
}

/* ---- Empty state ---- */
.ds-support-empty {
  text-align: center;
  padding: 40px 20px !important;
}

.ds-support-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  color: var(--ds-text-tertiary);
}

.ds-support-empty-inner p {
  margin: 0;
  font-size: 0.9375rem;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

/* ---- Pagination ---- */
.ds-support-pager {
  margin-top: 4px;
}

/* ---- Thread cards ---- */
.ds-support-thread-card {
  /* inherits ds-card */
}

.ds-support-thread-original {
  border-top: 2px solid var(--ds-primary);
}

.ds-support-thread-staff {
  border-inline-start: 3px solid var(--ds-primary);
}

.ds-support-thread-inner {
  display: flex;
  gap: 16px;
  padding: 18px;
}

.ds-support-thread-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 68px;
  text-align: center;
}

.ds-support-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px var(--ds-border);
}

.ds-support-thread-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.ds-support-thread-author a,
.ds-support-thread-author span:first-child {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ds-text-primary);
  text-decoration: none;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

.ds-support-thread-author a:hover {
  color: var(--ds-primary);
  text-decoration: underline;
}

.ds-support-role {
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: var(--ds-radius-full);
  display: inline-block;
}

.ds-support-role.admin {
  background: #e7f3ff;
  color: var(--ds-primary);
}

.ds-support-role.mod {
  background: #d1fae5;
  color: #059669;
}

.ds-support-role.member {
  background: var(--ds-surface-base);
  color: var(--ds-text-secondary);
}

body.night-mode .ds-support-role.admin {
  background: #19365e;
  color: #60a5fa;
}

body.night-mode .ds-support-role.mod {
  background: #064e3b;
  color: #34d399;
}

body.night-mode .ds-support-role.member {
  background: var(--ds-surface-sec);
  color: var(--ds-text-tertiary);
}

.ds-support-thread-body {
  flex: 1;
  min-width: 0;
}

.ds-support-thread-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--ds-text-tertiary);
  margin-bottom: 10px;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

.ds-support-thread-text {
  font-size: 0.9375rem;
  color: var(--ds-text-primary);
  line-height: 1.6;
  word-break: break-word;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

@media (max-width: 575px) {
  .ds-support-thread-inner {
    flex-direction: column;
  }

  .ds-support-thread-avatar-col {
    flex-direction: row;
    min-width: auto;
    text-align: start;
    align-items: center;
  }
}

/* ---- Reply / Create forms ---- */
.ds-support-reply-card {
  /* inherits ds-card */
}

.ds-support-form-body {
  padding: 16px;
}

.ds-support-wysiwyg {
  min-height: 120px;
  border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-sans), var(--ds-font-arabic) !important;
}

.ds-support-form-foot {
  display: flex;
  justify-content: flex-end;
  padding: 12px 16px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-sec);
}

/* ---- Create ticket card ---- */
.ds-support-create-card {
  max-width: 720px;
}

.ds-support-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.ds-support-label {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--ds-text-primary);
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
}

.ds-support-input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  font-size: 0.9375rem;
  background: var(--ds-surface-base);
  color: var(--ds-text-primary);
  outline: none;
  font-family: var(--ds-font-sans), var(--ds-font-arabic);
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
  width: 100%;
}

.ds-support-input:focus {
  border-color: var(--ds-primary);
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.18);
}

.ds-support-input::placeholder {
  color: var(--ds-text-tertiary);
}



/* --- Hero Banner --- */
.fb-support-hero {
  background: linear-gradient(135deg, #1877f2 0%, #4267b2 100%);
  padding: 40px 16px 56px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.fb-support-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 60% 80%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
}

.fb-support-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 600px;
  margin: 0 auto;
}

.fb-support-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  margin-bottom: 16px;
  color: #ffffff;
  backdrop-filter: blur(4px);
}

.fb-support-hero-title {
  font-size: 28px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.3px;
}

.fb-support-hero-sub {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
}

/* --- Page Layout --- */
.fb-support-wrap {
  margin-top: -28px;
  padding-bottom: 32px;
}

.fb-support-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

/* --- Sidebar --- */
.fb-support-sidebar {
  width: 260px;
  flex-shrink: 0;
  position: sticky;
  top: 70px;
}

@media (max-width: 767px) {
  .fb-support-layout {
    flex-direction: column;
  }

  .fb-support-sidebar {
    width: 100%;
    position: static;
  }
}

/* --- Main panel --- */
.fb-support-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* --- Cards --- */
.fb-support-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10), 0 1px 8px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  border: 1px solid #e4e6eb;
}

body.night-mode .fb-support-card {
  background: #242526;
  border-color: #393a3b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.fb-support-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e4e6eb;
  font-size: 15px;
  font-weight: 700;
  color: #050505;
  background: #f7f8fa;
}

body.night-mode .fb-support-card-head {
  background: #1c1e1f;
  border-bottom-color: #393a3b;
  color: #e4e6eb;
}

.fb-support-card-head i,
.fb-support-card-head .svg-container {
  color: #1877f2;
  flex-shrink: 0;
}

.fb-support-head-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.fb-support-head-breadcrumb {
  color: #65676b;
  font-weight: 400;
  font-size: 14px;
}

body.night-mode .fb-support-head-breadcrumb {
  color: #b0b3b8;
}

.fb-support-card-body {
  padding: 16px;
}

/* --- Filter Nav in sidebar --- */
.fb-support-filter-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

.fb-support-filter-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  color: #050505;
  text-decoration: none;
  border-radius: 0;
  transition: background 0.12s ease;
  position: relative;
}

body.night-mode .fb-support-filter-item {
  color: #e4e6eb;
}

.fb-support-filter-item:hover {
  background: #f0f2f5;
  text-decoration: none;
  color: #050505;
}

body.night-mode .fb-support-filter-item:hover {
  background: #3a3b3c;
  color: #e4e6eb;
}

.fb-support-filter-item.active {
  background: #e7f3ff;
  color: #1877f2;
  font-weight: 700;
}

body.night-mode .fb-support-filter-item.active {
  background: #19365e;
  color: #4599ff;
}

.fb-support-filter-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1877f2;
  border-radius: 0 3px 3px 0;
}

.fb-support-filter-count {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  background: #e4e6eb;
  color: #050505;
  flex-shrink: 0;
}

body.night-mode .fb-support-filter-count {
  background: #3a3b3c;
  color: #e4e6eb;
}

.fb-support-filter-count.unassigned {
  background: #fee2e2;
  color: #dc2626;
}

.fb-support-filter-count.in_progress {
  background: #dbeafe;
  color: #2563eb;
}

.fb-support-filter-count.opened {
  background: #e7f3ff;
  color: #1877f2;
}

.fb-support-filter-count.pending {
  background: #fef9c3;
  color: #ca8a04;
}

.fb-support-filter-count.solved {
  background: #d1fae5;
  color: #059669;
}

.fb-support-filter-count.closed {
  background: #fee2e2;
  color: #dc2626;
}

.fb-support-nav-divider {
  height: 1px;
  background: #e4e6eb;
  margin: 4px 16px;
}

body.night-mode .fb-support-nav-divider {
  background: #393a3b;
}

/* --- Ticket Details Sidebar Card --- */
.fb-support-detail-card .fb-support-card-body {
  padding: 12px 16px;
}

.fb-support-detail-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
}

.fb-support-detail-label {
  font-size: 12px;
  font-weight: 600;
  color: #65676b;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.night-mode .fb-support-detail-label {
  color: #b0b3b8;
}

.fb-support-detail-user {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #050505;
  text-decoration: none;
}

body.night-mode .fb-support-detail-user {
  color: #e4e6eb;
}

.fb-support-detail-user img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.fb-support-detail-user:hover {
  text-decoration: underline;
}

.fb-support-detail-time {
  font-size: 13px;
  color: #65676b;
}

body.night-mode .fb-support-detail-time {
  color: #b0b3b8;
}

.fb-support-detail-divider {
  height: 1px;
  background: #e4e6eb;
  margin: 6px 0;
}

body.night-mode .fb-support-detail-divider {
  background: #393a3b;
}

/* --- Status Badges --- */
.fb-support-status-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  line-height: 1;
}

.fb-support-status-badge.opened {
  background: #e7f3ff;
  color: #1877f2;
}

.fb-support-status-badge.in_progress {
  background: #dbeafe;
  color: #2563eb;
}

.fb-support-status-badge.pending {
  background: #fef9c3;
  color: #b45309;
}

.fb-support-status-badge.solved {
  background: #d1fae5;
  color: #059669;
}

.fb-support-status-badge.closed {
  background: #fee2e2;
  color: #dc2626;
}

.fb-support-status-badge.unassigned {
  background: #f3f4f6;
  color: #6b7280;
}

body.night-mode .fb-support-status-badge.opened {
  background: #19365e;
  color: #60a5fa;
}

body.night-mode .fb-support-status-badge.in_progress {
  background: #1e3a5f;
  color: #93c5fd;
}

body.night-mode .fb-support-status-badge.pending {
  background: #451a03;
  color: #fbbf24;
}

body.night-mode .fb-support-status-badge.solved {
  background: #064e3b;
  color: #34d399;
}

body.night-mode .fb-support-status-badge.closed {
  background: #4c1d1d;
  color: #f87171;
}

body.night-mode .fb-support-status-badge.unassigned {
  background: #374151;
  color: #9ca3af;
}

/* --- Agent badge --- */
.fb-support-agent-badge {
  font-size: 13px;
  color: #65676b;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.night-mode .fb-support-agent-badge {
  color: #b0b3b8;
}

/* --- Buttons --- */
.fb-support-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #1877f2;
  color: #ffffff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, transform 0.1s ease;
  white-space: nowrap;
}

.fb-support-btn-primary:hover {
  background: #1565c0;
  color: #ffffff;
  text-decoration: none;
  transform: translateY(-1px);
}

.fb-support-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: #1877f2;
  border: 1px solid #1877f2;
  border-radius: 8px;
  padding: 6px 14px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}

.fb-support-btn-outline:hover {
  background: #e7f3ff;
}

body.night-mode .fb-support-btn-outline {
  color: #4599ff;
  border-color: #4599ff;
}

body.night-mode .fb-support-btn-outline:hover {
  background: #19365e;
}

/* --- Status Pills Row (admin/mod view) --- */
.fb-support-pills-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.fb-support-pill {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  background: #e4e6eb;
  color: #050505;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}

body.night-mode .fb-support-pill {
  background: #3a3b3c;
  color: #e4e6eb;
}

.fb-support-pill:hover {
  background: #d8dadf;
  text-decoration: none;
  color: #050505;
}

body.night-mode .fb-support-pill:hover {
  background: #4a4b4c;
  color: #e4e6eb;
}

.fb-support-pill.active {
  background: #1877f2;
  color: #ffffff;
}

/* --- Search Form --- */
.fb-support-search-wrap {
  margin-bottom: 20px;
}

.fb-support-search-form {
  display: flex;
  gap: 8px;
  align-items: center;
}

.fb-support-search-input-wrap {
  position: relative;
  flex: 1;
}

.fb-support-search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #65676b;
  font-size: 14px;
}

[dir="RTL"] .fb-support-search-icon {
  left: auto;
  right: 12px;
}

.fb-support-search-input {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border: 1px solid #ced0d4;
  border-radius: 20px;
  font-size: 14px;
  background: #f0f2f5;
  color: #050505;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
}

[dir="RTL"] .fb-support-search-input {
  padding: 0 36px 0 12px;
}

.fb-support-search-input::placeholder {
  color: #65676b;
}

.fb-support-search-input:focus {
  border-color: #1877f2;
  background: #ffffff;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

body.night-mode .fb-support-search-input {
  background: #3a3b3c;
  border-color: #393a3b;
  color: #e4e6eb;
}

body.night-mode .fb-support-search-input::placeholder {
  color: #b0b3b8;
}

body.night-mode .fb-support-search-input:focus {
  background: #424344;
  border-color: #4599ff;
  box-shadow: 0 0 0 2px rgba(69, 153, 255, 0.2);
}

/* --- Table --- */
.fb-support-table-wrap {
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid #e4e6eb;
}

body.night-mode .fb-support-table-wrap {
  border-color: #393a3b;
}

.fb-support-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.fb-support-table thead th {
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #65676b;
  background: #f7f8fa;
  border-bottom: 1px solid #e4e6eb;
  white-space: nowrap;
}

body.night-mode .fb-support-table thead th {
  background: #1c1e1f;
  border-bottom-color: #393a3b;
  color: #b0b3b8;
}

.fb-support-table tbody td {
  padding: 12px 14px;
  vertical-align: middle;
  border-bottom: 1px solid #f0f2f5;
  color: #050505;
}

body.night-mode .fb-support-table tbody td {
  border-bottom-color: #2d2e2f;
  color: #e4e6eb;
}

.fb-support-table-row:hover td {
  background: #f7f8fa;
}

body.night-mode .fb-support-table-row:hover td {
  background: #2d2e2f;
}

.fb-support-table-row:last-child td {
  border-bottom: none;
}

.fb-support-id {
  color: #65676b;
  font-weight: 600;
  font-size: 13px;
}

body.night-mode .fb-support-id {
  color: #b0b3b8;
}

.fb-support-user-cell {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #050505;
  text-decoration: none;
  font-weight: 500;
}

body.night-mode .fb-support-user-cell {
  color: #e4e6eb;
}

.fb-support-user-cell img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.fb-support-user-cell:hover {
  color: #1877f2;
  text-decoration: none;
}

.fb-support-subject-link {
  color: #050505;
  font-weight: 600;
  text-decoration: none;
}

body.night-mode .fb-support-subject-link {
  color: #e4e6eb;
}

.fb-support-subject-link:hover {
  color: #1877f2;
  text-decoration: underline;
}

.fb-support-time-cell {
  color: #65676b;
  font-size: 13px;
  white-space: nowrap;
}

body.night-mode .fb-support-time-cell {
  color: #b0b3b8;
}

/* Empty state */
.fb-support-empty {
  text-align: center;
  padding: 40px 20px !important;
}

.fb-support-empty-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #65676b;
}

body.night-mode .fb-support-empty-inner {
  color: #b0b3b8;
}

.fb-support-empty-inner p {
  margin: 0;
  font-size: 15px;
}

/* Pagination */
.fb-support-pager {
  margin-top: 16px;
}

/* --- Ticket Topbar --- */
.fb-support-ticket-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #ffffff;
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.10);
  border: 1px solid #e4e6eb;
}

body.night-mode .fb-support-ticket-topbar {
  background: #242526;
  border-color: #393a3b;
}

.fb-support-ticket-subject {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  font-weight: 700;
  color: #050505;
  min-width: 0;
}

body.night-mode .fb-support-ticket-subject {
  color: #e4e6eb;
}

.fb-support-ticket-subject i {
  color: #1877f2;
  flex-shrink: 0;
}

/* --- Thread Cards --- */
.fb-support-thread-card {
  display: flex;
  gap: 16px;
  background: #ffffff;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  border: 1px solid #e4e6eb;
}

body.night-mode .fb-support-thread-card {
  background: #242526;
  border-color: #393a3b;
}

.fb-support-thread-card.fb-support-thread-staff {
  border-left: 3px solid #1877f2;
}

body.night-mode .fb-support-thread-card.fb-support-thread-staff {
  border-left-color: #4599ff;
}

.fb-support-thread-card.fb-support-thread-original {
  border-top: 2px solid #1877f2;
}

.fb-support-thread-avatar-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 70px;
  text-align: center;
}

.fb-support-thread-avatar {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 2px #e4e6eb;
}

body.night-mode .fb-support-thread-avatar {
  box-shadow: 0 0 0 2px #393a3b;
}

.fb-support-thread-author {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.fb-support-thread-author a,
.fb-support-thread-author span {
  font-size: 13px;
  font-weight: 600;
  color: #050505;
  text-decoration: none;
}

body.night-mode .fb-support-thread-author a,
body.night-mode .fb-support-thread-author span {
  color: #e4e6eb;
}

.fb-support-thread-author a:hover {
  color: #1877f2;
  text-decoration: underline;
}

.fb-support-thread-role {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 10px;
  display: inline-block;
}

.fb-support-thread-role.admin {
  background: #e7f3ff;
  color: #1877f2;
}

.fb-support-thread-role.mod {
  background: #d1fae5;
  color: #059669;
}

.fb-support-thread-role.member {
  background: #f3f4f6;
  color: #6b7280;
}

body.night-mode .fb-support-thread-role.admin {
  background: #19365e;
  color: #60a5fa;
}

body.night-mode .fb-support-thread-role.mod {
  background: #064e3b;
  color: #34d399;
}

body.night-mode .fb-support-thread-role.member {
  background: #374151;
  color: #9ca3af;
}

.fb-support-thread-body-col {
  flex: 1;
  min-width: 0;
}

.fb-support-thread-time {
  font-size: 12px;
  color: #65676b;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.night-mode .fb-support-thread-time {
  color: #b0b3b8;
}

.fb-support-thread-text {
  font-size: 15px;
  color: #050505;
  line-height: 1.6;
  word-break: break-word;
}

body.night-mode .fb-support-thread-text {
  color: #e4e6eb;
}

@media (max-width: 575px) {
  .fb-support-thread-card {
    flex-direction: column;
  }

  .fb-support-thread-avatar-col {
    flex-direction: row;
    min-width: auto;
    text-align: left;
    align-items: center;
  }
}

/* --- Reply/Create Form --- */
.fb-support-reply-card {
  margin-top: 0;
}

.fb-support-wysiwyg {
  min-height: 120px;
  border-radius: 8px;
}

.fb-support-form-footer {
  padding: 12px 16px;
  border-top: 1px solid #e4e6eb;
  display: flex;
  justify-content: flex-end;
  background: #f7f8fa;
}

body.night-mode .fb-support-form-footer {
  border-top-color: #393a3b;
  background: #1c1e1f;
}

/* --- Create Ticket Form Fields --- */
.fb-support-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.fb-support-label {
  font-size: 14px;
  font-weight: 600;
  color: #050505;
}

body.night-mode .fb-support-label {
  color: #e4e6eb;
}

.fb-support-input {
  height: 42px;
  padding: 0 14px;
  border: 1px solid #ced0d4;
  border-radius: 8px;
  font-size: 15px;
  background: #ffffff;
  color: #050505;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  width: 100%;
}

.fb-support-input:focus {
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

body.night-mode .fb-support-input {
  background: #3a3b3c;
  border-color: #393a3b;
  color: #e4e6eb;
}

body.night-mode .fb-support-input:focus {
  border-color: #4599ff;
  box-shadow: 0 0 0 2px rgba(69, 153, 255, 0.2);
}

/* RTL adjustments */
[dir="RTL"] .fb-support-filter-item.active::before {
  left: auto;
  right: 0;
  border-radius: 3px 0 0 3px;
}

[dir="RTL"] .fb-support-thread-card.fb-support-thread-staff {
  border-left: none;
  border-right: 3px solid #1877f2;
}

body.night-mode [dir="RTL"] .fb-support-thread-card.fb-support-thread-staff {
  border-right-color: #4599ff;
}

/* ============================================================
   FACEBOOK 1:1 COOKIE CONSENT BANNER & MODAL (orestbida v3)
   ============================================================ */
:root {
  --cc-bg: #ffffff;
  --cc-text: #1c1e21;
  --cc-btn-primary-bg: #1877f2;
  --cc-btn-primary-text: #ffffff;
  --cc-btn-primary-hover-bg: #166fe5;
  --cc-btn-secondary-bg: #e4e6eb;
  --cc-btn-secondary-text: #050505;
  --cc-btn-secondary-hover-bg: #d8dadf;
  --cc-modal-border: #ced0d4;
  --cc-btn-border-radius: 6px;
  --cc-modal-border-radius: 12px;
}

html.cc--darkmode,
body.night-mode #cc-main,
[data-bs-theme="dark"] #cc-main {
  --cc-bg: #242526;
  --cc-text: #e4e6eb;
  --cc-btn-primary-bg: #1877f2;
  --cc-btn-primary-text: #ffffff;
  --cc-btn-primary-hover-bg: #166fe5;
  --cc-btn-secondary-bg: #3a3b3c;
  --cc-btn-secondary-text: #e4e6eb;
  --cc-btn-secondary-hover-bg: #4e4f50;
  --cc-modal-border: #3e4042;
}

#cc-main {
  font-family: var(--fb-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
  z-index: 999999 !important;
}

/* --- Cookie Consent Floating Box --- */
#cc-main .cm {
  background: var(--cc-bg) !important;
  border-radius: 12px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  max-width: 440px !important;
  padding: 20px 22px !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0, 1), opacity 0.25s ease !important;
}

html.cc--darkmode #cc-main .cm,
body.night-mode #cc-main .cm {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.5), 0 2px 4px 0 rgba(0, 0, 0, 0.2) !important;
}

/* Title */
#cc-main .cm__title {
  font-family: var(--fb-font-display, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #050505 !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html.cc--darkmode #cc-main .cm__title,
body.night-mode #cc-main .cm__title {
  color: #e4e6eb !important;
}

/* Description */
#cc-main .cm__desc {
  font-size: 14px !important;
  line-height: 1.45 !important;
  color: #65676b !important;
  margin-bottom: 18px !important;
}

html.cc--darkmode #cc-main .cm__desc,
body.night-mode #cc-main .cm__desc {
  color: #b0b3b8 !important;
}

/* Action Buttons Container */
#cc-main .cm__btns {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Buttons Base */
#cc-main .cm__btn,
#cc-main .pm__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--fb-font-family, inherit) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  height: 38px !important;
  padding: 0 16px !important;
  border-radius: 6px !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  line-height: 1 !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease !important;
}

#cc-main .cm__btn:active,
#cc-main .pm__btn:active {
  transform: scale(0.98) !important;
}

/* Primary Button: Accept all */
#cc-main .cm__btn[data-role="all"],
#cc-main .pm__btn[data-role="all"] {
  background-color: #1877f2 !important;
  color: #ffffff !important;
  border-color: #1877f2 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

#cc-main .cm__btn[data-role="all"]:hover,
#cc-main .pm__btn[data-role="all"]:hover {
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
  color: #ffffff !important;
}

/* Secondary Button: Reject non-essential */
#cc-main .cm__btn[data-role="necessary"],
#cc-main .pm__btn[data-role="necessary"] {
  background-color: #e4e6eb !important;
  color: #050505 !important;
}

#cc-main .cm__btn[data-role="necessary"]:hover,
#cc-main .pm__btn[data-role="necessary"]:hover {
  background-color: #d8dadf !important;
  color: #050505 !important;
}

html.cc--darkmode #cc-main .cm__btn[data-role="necessary"],
body.night-mode #cc-main .cm__btn[data-role="necessary"],
html.cc--darkmode #cc-main .pm__btn[data-role="necessary"],
body.night-mode #cc-main .pm__btn[data-role="necessary"] {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

html.cc--darkmode #cc-main .cm__btn[data-role="necessary"]:hover,
body.night-mode #cc-main .cm__btn[data-role="necessary"]:hover,
html.cc--darkmode #cc-main .pm__btn[data-role="necessary"]:hover,
body.night-mode #cc-main .pm__btn[data-role="necessary"]:hover {
  background-color: #4e4f50 !important;
  color: #ffffff !important;
}

/* Tertiary Link Button: Manage preferences */
#cc-main .cm__btn[data-role="show"] {
  background: transparent !important;
  color: #1877f2 !important;
  border: none !important;
  font-size: 13.5px !important;
  height: 32px !important;
  padding: 0 8px !important;
}

#cc-main .cm__btn[data-role="show"]:hover {
  color: #166fe5 !important;
  text-decoration: underline !important;
  background-color: rgba(24, 119, 242, 0.06) !important;
}

html.cc--darkmode #cc-main .cm__btn[data-role="show"],
body.night-mode #cc-main .cm__btn[data-role="show"] {
  color: #4599ff !important;
}

html.cc--darkmode #cc-main .cm__btn[data-role="show"]:hover,
body.night-mode #cc-main .cm__btn[data-role="show"]:hover {
  color: #6fb0ff !important;
  background-color: rgba(69, 153, 255, 0.1) !important;
}

/* --- Preferences Modal (Center Dialog) --- */
#cc-main .pm {
  background: var(--cc-bg) !important;
  border-radius: 12px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.25) !important;
}

html.cc--darkmode #cc-main .pm,
body.night-mode #cc-main .pm {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

#cc-main .pm__header {
  border-bottom: 1px solid #e4e6eb !important;
  padding: 16px 20px !important;
}

html.cc--darkmode #cc-main .pm__header,
body.night-mode #cc-main .pm__header {
  border-bottom-color: #3e4042 !important;
}

#cc-main .pm__title {
  font-family: var(--fb-font-display, inherit) !important;
  font-size: 19px !important;
  font-weight: 700 !important;
  color: #050505 !important;
}

html.cc--darkmode #cc-main .pm__title,
body.night-mode #cc-main .pm__title {
  color: #e4e6eb !important;
}

#cc-main .pm__section {
  border-bottom: 1px solid #f0f2f5 !important;
  padding: 14px 20px !important;
}

html.cc--darkmode #cc-main .pm__section,
body.night-mode #cc-main .pm__section {
  border-bottom-color: #3a3b3c !important;
}

#cc-main .pm__section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
}

html.cc--darkmode #cc-main .pm__section-title,
body.night-mode #cc-main .pm__section-title {
  color: #e4e6eb !important;
}

#cc-main .pm__section-desc {
  font-size: 13.5px !important;
  color: #65676b !important;
}

html.cc--darkmode #cc-main .pm__section-desc,
body.night-mode #cc-main .pm__section-desc {
  color: #b0b3b8 !important;
}

#cc-main .pm__footer {
  border-top: 1px solid #e4e6eb !important;
  padding: 14px 20px !important;
  background: #f7f8fa !important;
  border-radius: 0 0 12px 12px !important;
}

html.cc--darkmode #cc-main .pm__footer,
body.night-mode #cc-main .pm__footer {
  border-top-color: #3e4042 !important;
  background: #1c1e1f !important;
}

/* Toggle Switches inside Preferences */
#cc-main input:checked+.section__toggle {
  background-color: #1877f2 !important;
}

/* Mobile Responsiveness for Cookies Card */
@media (max-width: 575.98px) {
  #cc-main .cm {
    width: calc(100vw - 24px) !important;
    max-width: 100% !important;
    margin: 12px !important;
    padding: 16px 16px !important;
  }

  #cc-main .cm__title {
    font-size: 16.5px !important;
  }

  #cc-main .cm__desc {
    font-size: 13.5px !important;
    margin-bottom: 14px !important;
  }

  #cc-main .cm__btn {
    height: 36px !important;
    font-size: 14px !important;
  }
}

/* ============================================================
   Meta Facebook Feed & Post Cards Specification (CDS / APK)
   1. Modern Shimmer Skeleton Animation for Feed Loading
   2. Facebook Authentic Post Card Geometry & Spacing
   3. Mobile Bottom Sheet for Post Actions Dropdown
   ============================================================ */

/* 1. Shimmer Skeleton Animation */
@keyframes fb-shimmer-sweep {
  0% {
    background-position: -600px 0;
  }

  100% {
    background-position: 600px 0;
  }
}

.js_posts_loader,
.panel-effect {
  background: transparent !important;
}

.js_posts_loader .post-body.with-loader {
  padding: 16px !important;
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  position: relative !important;
  overflow: hidden !important;
}

body.night-mode .js_posts_loader .post-body.with-loader {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fake-effect {
  background: #ebedf0 !important;
  background-image: linear-gradient(90deg,
      rgba(235, 237, 240, 0) 0%,
      rgba(255, 255, 255, 0.65) 50%,
      rgba(235, 237, 240, 0) 100%) !important;
  background-size: 600px 100% !important;
  background-repeat: no-repeat !important;
  animation: fb-shimmer-sweep 1.4s ease-in-out infinite !important;
}

body.night-mode .fake-effect {
  background: #303031 !important;
  background-image: linear-gradient(90deg,
      rgba(48, 48, 49, 0) 0%,
      rgba(255, 255, 255, 0.07) 50%,
      rgba(48, 48, 49, 0) 100%) !important;
}

/* 2. Facebook Post Card Standard Geometry & Typography */
.post {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 16px !important;
  transition: box-shadow 0.15s ease;
}

body.night-mode .post {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.post-header {
  padding: 12px 16px 4px 16px !important;
}

.post-avatar-picture {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
}

body.night-mode .post-avatar-picture {
  border-color: rgba(255, 255, 255, 0.1) !important;
}

.post-meta .post-author {
  font-family: var(--fb-font-family) !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  color: #050505 !important;
}

body.night-mode .post-meta .post-author {
  color: #e4e6eb !important;
}

.post-meta .post-time {
  font-size: 13px !important;
  color: #65676b !important;
}

body.night-mode .post-meta .post-time {
  color: #b0b3b8 !important;
}

.post-text {
  font-family: var(--fb-font-family) !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  color: #050505 !important;
  padding: 8px 16px 12px 16px !important;
}

body.night-mode .post-text {
  color: #e4e6eb !important;
}

/* Post Stats & Actions Bar */
.post-stats {
  padding: 10px 16px !important;
  border-bottom: 1px solid #e4e6eb !important;
  color: #65676b !important;
  font-size: 14px !important;
}

body.night-mode .post-stats {
  border-bottom-color: #3e4042 !important;
  color: #b0b3b8 !important;
}

/* post-actions handled by default theme css */

/* 3. Mobile Post Optimization & Bottom Sheet Action Menu */
@media (max-width: 767.98px) {

  /* On mobile app layout, cards touch the edges with 8px canvas separators */
  .post {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: 1px solid #dee3e9 !important;
    border-bottom: 8px solid #f1f4f7 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
  }

  body.night-mode .post {
    border-top-color: #303031 !important;
    border-bottom-color: #18191a !important;
  }

  /* Facebook App Bottom Sheet for Post & Comment Action Menus */
  .action-dropdown-menu.show,
  .post-header .dropdown-menu.show,
  .post-actions .dropdown-menu.show,
  .comment .dropdown-menu.show {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    border-radius: 20px 20px 0 0 !important;
    border: none !important;
    background: #ffffff !important;
    box-shadow: 0 -10px 36px rgba(0, 0, 0, 0.35) !important;
    padding: 12px 14px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 10500 !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    animation: fb-sheet-slideup 0.25s cubic-bezier(0.1, 0.9, 0.2, 1) forwards !important;
  }

  body.night-mode .action-dropdown-menu.show,
  body.night-mode .post-header .dropdown-menu.show,
  body.night-mode .post-actions .dropdown-menu.show,
  body.night-mode .comment .dropdown-menu.show {
    background: #242526 !important;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.7) !important;
    border-top: 1px solid #3e4042 !important;
  }

  /* Drag handle at the top of the Bottom Sheet */
  .action-dropdown-menu.show::before,
  .post-header .dropdown-menu.show::before,
  .post-actions .dropdown-menu.show::before,
  .comment .dropdown-menu.show::before {
    content: "" !important;
    display: block !important;
    width: 44px !important;
    height: 5px !important;
    border-radius: 5px !important;
    background: #ced0d4 !important;
    margin: 2px auto 14px auto !important;
  }

  body.night-mode .action-dropdown-menu.show::before,
  body.night-mode .post-header .dropdown-menu.show::before,
  body.night-mode .post-actions .dropdown-menu.show::before,
  body.night-mode .comment .dropdown-menu.show::before {
    background: #4e4f50 !important;
  }

  /* Sheet Action Items (Rounded Discs with Icon + Text) */
  .action-dropdown-menu .dropdown-item,
  .post-header .dropdown-menu .dropdown-item,
  .post-actions .dropdown-menu .dropdown-item,
  .comment .dropdown-menu .dropdown-item {
    border-radius: 12px !important;
    padding: 10px 12px !important;
    margin-bottom: 2px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #050505 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    transition: background 0.15s ease !important;
  }

  body.night-mode .action-dropdown-menu .dropdown-item,
  body.night-mode .post-header .dropdown-menu .dropdown-item,
  body.night-mode .post-actions .dropdown-menu .dropdown-item,
  body.night-mode .comment .dropdown-menu .dropdown-item {
    color: #e4e6eb !important;
  }

  .action-dropdown-menu .dropdown-item:active,
  .post-header .dropdown-menu .dropdown-item:active,
  .post-actions .dropdown-menu .dropdown-item:active,
  .comment .dropdown-menu .dropdown-item:active {
    background: #f0f2f5 !important;
    transform: scale(0.98) !important;
  }

  body.night-mode .action-dropdown-menu .dropdown-item:active,
  body.night-mode .post-header .dropdown-menu .dropdown-item:active,
  body.night-mode .post-actions .dropdown-menu .dropdown-item:active,
  body.night-mode .comment .dropdown-menu .dropdown-item:active {
    background: #3a3b3c !important;
  }

  /* Icons inside action sheets: circular soft background */
  .action-dropdown-menu .main-icon,
  .post-header .dropdown-menu .main-icon,
  .comment .dropdown-menu .main-icon {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    padding: 8px !important;
    border-radius: 50% !important;
    background: #f0f2f5 !important;
    color: #050505 !important;
    margin-right: 0 !important;
  }

  body.night-mode .action-dropdown-menu .main-icon,
  body.night-mode .post-header .dropdown-menu .main-icon,
  body.night-mode .comment .dropdown-menu .main-icon {
    background: #3a3b3c !important;
    color: #e4e6eb !important;
  }

  .action-dropdown-menu .dropdown-divider,
  .post-header .dropdown-menu .dropdown-divider {
    margin: 6px 4px !important;
    border-color: #e4e6eb !important;
  }

  body.night-mode .action-dropdown-menu .dropdown-divider,
  body.night-mode .post-header .dropdown-menu .dropdown-divider {
    border-color: #3e4042 !important;
  }
}

@keyframes fb-sheet-slideup {
  0% {
    transform: translateY(100%);
    opacity: 0.5;
  }

  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


/* ============================================================
   META ENTERPRISE ADMIN CONTROL PANEL (ADMINCP) DESIGN
   ============================================================ */
.admin-enterprise-wrapper {
  font-family: var(--fb-font) !important;
}

/* --- Admin Sidebar --- */
.admin-enterprise-wrapper .admin-sidebar .card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.admin-enterprise-wrapper .admin-sidebar .card:hover {
  border-color: rgba(8, 102, 255, 0.25) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
}

.admin-enterprise-wrapper .admin-sidebar .card-header.block-title {
  background: #f8fafc !important;
  color: #65676b !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.admin-enterprise-wrapper .admin-sidebar .card-body.with-nav {
  padding: 8px !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li {
  margin-bottom: 3px !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li>div.static {
  display: flex !important;
  align-items: center !important;
  padding: 8px 12px !important;
  color: #1c1e21 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 8px !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a:hover {
  background-color: #f0f2f5 !important;
  color: #0866ff !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li.active>a,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a[aria-expanded="true"] {
  background-color: rgba(8, 102, 255, 0.08) !important;
  color: #0866ff !important;
  font-weight: 600 !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a svg,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a i {
  color: #65676b !important;
  transition: color 0.15s ease, transform 0.15s ease !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav>li.active>a svg,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li.active>a i,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a:hover svg,
.admin-enterprise-wrapper .admin-sidebar .side-nav>li>a:hover i {
  color: #0866ff !important;
}

/* Accordion Child Navigation */
.admin-enterprise-wrapper .admin-sidebar .side-nav ul {
  list-style: none !important;
  padding: 4px 0 6px 28px !important;
  margin: 4px 0 !important;
  border-inline-start: 2px solid rgba(8, 102, 255, 0.18) !important;
}

[dir="RTL"] .admin-enterprise-wrapper .admin-sidebar .side-nav ul {
  padding: 4px 28px 6px 0 !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav ul li a {
  display: block !important;
  padding: 6px 12px !important;
  color: #65676b !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  border-radius: 6px !important;
  transition: all 0.15s ease !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav ul li a:hover {
  background: #f0f2f5 !important;
  color: #0866ff !important;
  padding-inline-start: 16px !important;
}

.admin-enterprise-wrapper .admin-sidebar .side-nav ul li.active a {
  background: rgba(8, 102, 255, 0.1) !important;
  color: #0866ff !important;
  font-weight: 600 !important;
}

/* --- Admin Content Main Area --- */
.admin-enterprise-wrapper .sg-offcanvas-mainbar>.card,
.admin-enterprise-wrapper .admin-main-card {
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  background: #ffffff !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  overflow: hidden !important;
}

.admin-enterprise-wrapper .admin-main-card>.card-header,
.admin-enterprise-wrapper .sg-offcanvas-mainbar>.card>.card-header {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding: 16px 20px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #1c1e21 !important;
}

.admin-enterprise-wrapper .admin-chart-box {
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  padding: 16px !important;
}

/* --- KPI Stat Cards (Meta Business Suite Style) --- */
.stat-panel.stat-card-modern {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.stat-panel.stat-card-modern:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
}

.stat-panel.stat-card-modern .stat-cell.narrow {
  padding: 18px !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  z-index: 1 !important;
}

.stat-panel.stat-card-modern .stat-icon-wrapper {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  margin-bottom: 14px !important;
  transition: transform 0.2s ease !important;
}

.stat-panel.stat-card-modern:hover .stat-icon-wrapper {
  transform: scale(1.08) !important;
}

.stat-panel.stat-card-modern .stat-content {
  margin-bottom: 12px !important;
}

.stat-panel.stat-card-modern .stat-number {
  display: block !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
  letter-spacing: -0.5px !important;
  color: #1c1e21 !important;
  margin-bottom: 4px !important;
}

.stat-panel.stat-card-modern .stat-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #65676b !important;
}

.stat-panel.stat-card-modern .stat-action {
  margin-top: auto !important;
  padding-top: 10px !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.stat-panel.stat-card-modern .stat-link {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  transition: transform 0.15s ease, opacity 0.15s ease !important;
}

.stat-panel.stat-card-modern:hover .stat-link {
  transform: translateX(3px) !important;
}

[dir="RTL"] .stat-panel.stat-card-modern:hover .stat-link {
  transform: translateX(-3px) !important;
}

/* Palette Variations for KPI Cards */
.stat-card-modern.stat-primary {
  border-left: 4px solid #0866ff !important;
}

[dir="RTL"] .stat-card-modern.stat-primary {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #0866ff !important;
}

.stat-card-modern.stat-primary .stat-icon-wrapper {
  background: rgba(8, 102, 255, 0.1) !important;
  color: #0866ff !important;
}

.stat-card-modern.stat-primary .stat-link {
  color: #0866ff !important;
}

.stat-card-modern.stat-teal {
  border-left: 4px solid #00a884 !important;
}

[dir="RTL"] .stat-card-modern.stat-teal {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #00a884 !important;
}

.stat-card-modern.stat-teal .stat-icon-wrapper {
  background: rgba(0, 168, 132, 0.1) !important;
  color: #00a884 !important;
}

.stat-card-modern.stat-teal .stat-link {
  color: #00a884 !important;
}

.stat-card-modern.stat-warning {
  border-left: 4px solid #f7b125 !important;
}

[dir="RTL"] .stat-card-modern.stat-warning {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #f7b125 !important;
}

.stat-card-modern.stat-warning .stat-icon-wrapper {
  background: rgba(247, 177, 37, 0.12) !important;
  color: #b87b00 !important;
}

.stat-card-modern.stat-warning .stat-link {
  color: #b87b00 !important;
}

.stat-card-modern.stat-danger {
  border-left: 4px solid #fa383e !important;
}

[dir="RTL"] .stat-card-modern.stat-danger {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #fa383e !important;
}

.stat-card-modern.stat-danger .stat-icon-wrapper {
  background: rgba(250, 56, 62, 0.1) !important;
  color: #fa383e !important;
}

.stat-card-modern.stat-danger .stat-link {
  color: #fa383e !important;
}

.stat-card-modern.stat-red {
  border-left: 4px solid #991b1b !important;
}

[dir="RTL"] .stat-card-modern.stat-red {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #991b1b !important;
}

.stat-card-modern.stat-red .stat-icon-wrapper {
  background: rgba(153, 27, 27, 0.1) !important;
  color: #991b1b !important;
}

.stat-card-modern.stat-red .stat-link {
  color: #991b1b !important;
}

.stat-card-modern.stat-slate {
  border-left: 4px solid #64748b !important;
}

[dir="RTL"] .stat-card-modern.stat-slate {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #64748b !important;
}

.stat-card-modern.stat-slate .stat-icon-wrapper {
  background: rgba(100, 116, 139, 0.1) !important;
  color: #64748b !important;
}

.stat-card-modern.stat-green {
  border-left: 4px solid #10b981 !important;
}

[dir="RTL"] .stat-card-modern.stat-green {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #10b981 !important;
}

.stat-card-modern.stat-green .stat-icon-wrapper {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
}

.stat-card-modern.stat-green .stat-link {
  color: #10b981 !important;
}

.stat-card-modern.stat-indigo {
  border-left: 4px solid #6366f1 !important;
}

[dir="RTL"] .stat-card-modern.stat-indigo {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #6366f1 !important;
}

.stat-card-modern.stat-indigo .stat-icon-wrapper {
  background: rgba(99, 102, 241, 0.1) !important;
  color: #6366f1 !important;
}

.stat-card-modern.stat-indigo .stat-link {
  color: #6366f1 !important;
}

.stat-card-modern.stat-cyan {
  border-left: 4px solid #06b6d4 !important;
}

[dir="RTL"] .stat-card-modern.stat-cyan {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #06b6d4 !important;
}

.stat-card-modern.stat-cyan .stat-icon-wrapper {
  background: rgba(6, 182, 212, 0.1) !important;
  color: #06b6d4 !important;
}

.stat-card-modern.stat-blue {
  border-left: 4px solid #3b82f6 !important;
}

[dir="RTL"] .stat-card-modern.stat-blue {
  border-left: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-right: 4px solid #3b82f6 !important;
}

.stat-card-modern.stat-blue .stat-icon-wrapper {
  background: rgba(59, 130, 246, 0.1) !important;
  color: #3b82f6 !important;
}

/* --- Admin Tables & Data Grids --- */
.admin-enterprise-wrapper .table {
  border-color: rgba(0, 0, 0, 0.06) !important;
  vertical-align: middle !important;
}

.admin-enterprise-wrapper .table thead th {
  background: #f8fafc !important;
  color: #475569 !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
}

.admin-enterprise-wrapper .table tbody td {
  padding: 12px 16px !important;
  font-size: 13.5px !important;
  color: #1c1e21 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.admin-enterprise-wrapper .table tbody tr:hover td {
  background-color: #f8fafc !important;
}

/* --- Admin Form Controls & Switches --- */
.admin-enterprise-wrapper .form-control,
.admin-enterprise-wrapper .form-select {
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  padding: 9px 14px !important;
  font-size: 14px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.admin-enterprise-wrapper .form-control:focus,
.admin-enterprise-wrapper .form-select:focus {
  border-color: #0866ff !important;
  box-shadow: 0 0 0 3px rgba(8, 102, 255, 0.15) !important;
}

.admin-enterprise-wrapper .form-check-input:checked {
  background-color: #0866ff !important;
  border-color: #0866ff !important;
}

/* --- Dark Mode (night-mode) Adaptations --- */
body.night-mode .admin-enterprise-wrapper .admin-sidebar .card,
body.night-mode .admin-enterprise-wrapper .admin-main-card,
body.night-mode .admin-enterprise-wrapper .sg-offcanvas-mainbar>.card {
  background: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .card-header.block-title,
body.night-mode .admin-enterprise-wrapper .admin-chart-box,
body.night-mode .admin-enterprise-wrapper .table thead th {
  background: #18191a !important;
  color: #b0b3b8 !important;
  border-color: #393a3b !important;
}

body.night-mode .admin-enterprise-wrapper .admin-main-card>.card-header,
body.night-mode .admin-enterprise-wrapper .sg-offcanvas-mainbar>.card>.card-header {
  background: #242526 !important;
  color: #e4e6eb !important;
  border-color: #393a3b !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav>li>a,
body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav>li>div.static {
  color: #e4e6eb !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav>li>a:hover {
  background-color: #3a3b3c !important;
  color: #4599ff !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav>li.active>a,
body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav>li>a[aria-expanded="true"] {
  background-color: rgba(69, 153, 255, 0.15) !important;
  color: #4599ff !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav ul {
  border-inline-start-color: rgba(69, 153, 255, 0.3) !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav ul li a {
  color: #b0b3b8 !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav ul li a:hover {
  background: #3a3b3c !important;
  color: #4599ff !important;
}

body.night-mode .admin-enterprise-wrapper .admin-sidebar .side-nav ul li.active a {
  background: rgba(69, 153, 255, 0.2) !important;
  color: #4599ff !important;
}

body.night-mode .stat-panel.stat-card-modern {
  background: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

body.night-mode .stat-panel.stat-card-modern .stat-number {
  color: #e4e6eb !important;
}

body.night-mode .stat-panel.stat-card-modern .stat-label {
  color: #b0b3b8 !important;
}

body.night-mode .stat-panel.stat-card-modern .stat-action {
  border-top-color: #393a3b !important;
}

body.night-mode .admin-enterprise-wrapper .table {
  border-color: #393a3b !important;
}

body.night-mode .admin-enterprise-wrapper .table tbody td {
  color: #e4e6eb !important;
  border-color: #393a3b !important;
}

body.night-mode .admin-enterprise-wrapper .table tbody tr:hover td {
  background-color: #2e2f30 !important;
}

body.night-mode .admin-enterprise-wrapper .form-control,
body.night-mode .admin-enterprise-wrapper .form-select {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

body.night-mode .admin-enterprise-wrapper .form-control:focus,
body.night-mode .admin-enterprise-wrapper .form-select:focus {
  border-color: #4599ff !important;
  box-shadow: 0 0 0 3px rgba(69, 153, 255, 0.2) !important;
}

/* --- Admin Brand Header & Instant Search --- */
.admin-brand-header {
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
}

.admin-brand-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0866ff, #0052cc) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 19px !important;
  margin-inline-end: 12px !important;
  box-shadow: 0 2px 8px rgba(8, 102, 255, 0.3) !important;
}

.admin-brand-info h6 {
  font-size: 14px !important;
  color: #1c1e21 !important;
}

.admin-nav-search {
  background: #f0f2f5 !important;
  border-radius: 20px !important;
  padding: 2px 10px !important;
  transition: all 0.2s ease !important;
}

.admin-nav-search:focus-within {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px #0866ff !important;
}

#adminNavFilter {
  font-size: 12.5px !important;
}

#adminNavFilter::placeholder {
  color: #8a8d91 !important;
}

/* --- Meta Business Quick Action Hub --- */
.quick-action-tile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 14px 10px !important;
  background: #f8fafc !important;
  border: 1px solid rgba(0, 0, 0, 0.06) !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
}

.quick-action-tile:hover {
  background: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07) !important;
  border-color: rgba(8, 102, 255, 0.25) !important;
}

.quick-action-tile .tile-icon {
  width: 42px !important;
  height: 42px !important;
  border-radius: 10px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  margin-bottom: 8px !important;
  transition: transform 0.2s ease !important;
}

.quick-action-tile:hover .tile-icon {
  transform: scale(1.1) !important;
}

.quick-action-tile .tile-title {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: #1c1e21 !important;
}

.bg-primary-soft {
  background: rgba(8, 102, 255, 0.1) !important;
  color: #0866ff !important;
}

.bg-success-soft {
  background: rgba(16, 185, 129, 0.1) !important;
  color: #10b981 !important;
}

.bg-purple-soft {
  background: rgba(139, 92, 246, 0.1) !important;
  color: #8b5cf6 !important;
}

.bg-amber-soft {
  background: rgba(245, 158, 11, 0.1) !important;
  color: #f59e0b !important;
}

/* Dark mode for Brand Header & Quick Action Hub */
body.night-mode .admin-brand-header {
  background: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

body.night-mode .admin-brand-info h6 {
  color: #e4e6eb !important;
}

body.night-mode .admin-nav-search {
  background: #3a3b3c !important;
}

body.night-mode .admin-nav-search:focus-within {
  background: #242526 !important;
  box-shadow: 0 0 0 2px #4599ff !important;
}

body.night-mode #adminNavFilter {
  color: #e4e6eb !important;
}

body.night-mode #adminNavFilter::placeholder {
  color: #b0b3b8 !important;
}

body.night-mode .quick-action-tile {
  background: #18191a !important;
  border-color: #393a3b !important;
}

body.night-mode .quick-action-tile:hover {
  background: #242526 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

body.night-mode .quick-action-tile .tile-title {
  color: #e4e6eb !important;
}

/* --- AdminCP Mobile & Responsive Enhancements (No side gaps, full width, Meta clean UI) --- */
@media (max-width: 767px) {
  .admin-enterprise-wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-enterprise-wrapper>.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .admin-enterprise-wrapper .admin-sidebar,
  .admin-enterprise-wrapper .sg-offcanvas-mainbar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .admin-enterprise-wrapper .admin-sidebar .card,
  .admin-enterprise-wrapper .admin-brand-header,
  .admin-enterprise-wrapper .admin-main-card,
  .admin-enterprise-wrapper .sg-offcanvas-mainbar>.card {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  }

  .admin-enterprise-wrapper .admin-main-card>.card-header,
  .admin-enterprise-wrapper .sg-offcanvas-mainbar>.card>.card-header {
    padding: 14px 16px !important;
    font-size: 15px !important;
  }

  .admin-enterprise-wrapper .card-body {
    padding: 12px 14px !important;
  }

  .admin-enterprise-wrapper .admin-chart-box {
    padding: 12px 8px !important;
    border-radius: 8px !important;
  }

  .admin-enterprise-wrapper .table-responsive {
    border: none !important;
    margin-bottom: 0 !important;
  }

  .admin-enterprise-wrapper .table {
    margin-bottom: 0 !important;
  }

  .admin-enterprise-wrapper .table thead th,
  .admin-enterprise-wrapper .table tbody td {
    padding: 10px 8px !important;
    font-size: 13px !important;
  }

  .stat-panel.stat-card-modern .stat-cell.narrow {
    padding: 14px !important;
  }

  .stat-panel.stat-card-modern .stat-number {
    font-size: 22px !important;
  }
}

/* =========================================================================
   Facebook Official Desktop 1:1 Layout Refinements (Matching User Screenshot)
   ========================================================================= */

@media (min-width: 992px) {

  /* --- Global Feed Background & Container --- */
  body.logged-in {
    background-color: #f0f2f5 !important;
  }

  body.logged-in.night-mode {
    background-color: #18191a !important;
  }

  /* --- Stories: Master rules defined above in #stories --- */

  /* --- Feed Posts: Facebook Clean Card Look --- */
  .fb-shell .post {
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 16px !important;
  }

  body.night-mode .fb-shell .post {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
  }

  /* --- Left Sidebar: Facebook Navigation Alignment --- */
  .fb-left .fb-navlink {
    height: 44px;
    padding: 0 12px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 500;
  }

  .fb-left .fb-navlink.fb-profile {
    height: 52px;
  }

  .fb-left .fb-navlink.fb-profile .fb-navicon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }

  .fb-left .fb-navlink.fb-profile .fb-navlabel {
    font-size: 15px;
    font-weight: 600;
  }

  /* --- Right Sidebar: Sponsored & Birthdays Clean Sectioning --- */
  .fb-right .card-header i.fa-bullhorn {
    display: none !important;
  }

  .fb-right .card-body.with-list .feeds-item {
    border-bottom: none !important;
    padding: 4px 6px !important;
    border-radius: 8px !important;
    transition: background 0.15s ease !important;
  }

  .fb-right .card-body.with-list .feeds-item:hover {
    background: var(--fb-hover) !important;
  }

  body.night-mode .fb-right .card-body.with-list .feeds-item:hover {
    background: var(--fb-dark-hover) !important;
  }

  .fb-right .data-container {
    padding: 4px 6px !important;
  }

  .fb-right .data-avatar img {
    border-radius: 50% !important;
  }

  .fb-right .fb-contacts-title {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: var(--fb-muted) !important;
  }

  body.night-mode .fb-right .fb-contacts-title {
    color: var(--fb-dark-muted) !important;
  }

  /* Floating new chat / compose button on bottom-right matching Facebook */
  .fb-shell {
    position: relative;
  }
}


/* ==========================================================================
   FACEBOOK REELS THEATER MODE
   ========================================================================== */
body.reels {
  background: #000000 !important;
  color: #ffffff !important;
  overflow: hidden !important;
}

body.reels .main-wrapper {
  background: #000000 !important;
  min-height: 100vh;
  height: 100vh;
  overflow: hidden;
}

/* Header in Reels: pure black, clean Facebook theater navbar */
body.reels .main-header {
  background: #000000 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
  z-index: 100;
}

body.reels .main-header .fb-nav,
body.reels .main-header .header-search,
body.reels .main-header .search-wrapper {
  display: none !important;
}

body.reels .fb-hrow {
  direction: ltr !important;
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

body.reels .fb-hleft {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fb-reels-close-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffffff;
  color: #000000 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  text-decoration: none !important;
  transition: transform 0.15s ease, opacity 0.15s ease;
  flex-shrink: 0;
}

.fb-reels-close-circle:hover {
  opacity: 0.9;
  transform: scale(1.06);
}

/* Theater Page Shell */
.fb-reels-theater-shell {
  width: 100vw;
  height: calc(100vh - 56px);
  max-height: calc(100vh - 56px);
  overflow: hidden;
  background: #000000;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

body.reels .reels-wrapper,
.fb-reels-theater-shell .reels-wrapper {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.fb-reels-theater-shell .reels-loader {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  color: #ffffff;
  z-index: 50;
  font-size: 14px;
}

/* Single Reel Container */
body.reels .reel-container.hidden,
.reel-container.hidden {
  display: none !important;
}

body.reels .reel-container,
.reel-container {
  width: 100% !important;
  height: 100% !important;
  top: 0 !important;
  padding-top: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.fb-reel-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
  position: relative;
}

/* Center stage: side-by-side video and action stack */
.fb-reel-center-stage {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-end !important;
  justify-content: center !important;
  gap: 16px !important;
  position: relative !important;
  direction: ltr !important;
  /* Always keeps action buttons on the right side of video */
  height: calc(100vh - 76px) !important;
  max-height: calc(100vh - 76px) !important;
  margin: 0 auto !important;
}

/* Video Box: 9:16 vertical ratio, fits height */
.fb-reel-video-box {
  position: relative !important;
  height: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 9 / 16 !important;
  width: auto !important;
  max-width: calc((100vh - 76px) * (9 / 16)) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #000000 !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

.fb-reel-video-box .plyr--video {
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.fb-reel-video-box .plyr__video-wrapper {
  height: 100% !important;
  border-radius: 12px !important;
}

.fb-reel-video-box video {
  object-fit: cover !important;
  width: 100% !important;
  height: 100% !important;
}

.fb-reel-video-box .plyr__controls {
  display: none !important;
}

/* Standalone Modern Facebook Volume / Mute Button */
.fb-reel-volume-btn {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 40;
  padding: 0;
  transition: all 0.2s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.fb-reel-volume-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}

.fb-reel-volume-btn:active {
  transform: scale(0.92);
}

.fb-reel-volume-btn i {
  font-size: 15px;
  color: #ffffff;
  pointer-events: none;
}

/* RTL positioning: keep it cleanly in top-left or top-right */
html[dir="RTL"] .fb-reel-volume-btn {
  right: auto;
  left: 14px;
}

/* Bottom Overlay Inside Video: Creator info, caption, audio */
.fb-reel-bottom-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 145px;
  max-height: 145px;
  padding: 14px 16px 14px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.75) 55%, rgba(0, 0, 0, 0) 100%);
  z-index: 25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  text-align: start;
  overflow: hidden;
}

.fb-reel-bottom-overlay * {
  pointer-events: auto;
}

.fb-reel-author-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  height: 36px;
  min-height: 36px;
  max-height: 36px;
  width: 100%;
}

.fb-reel-author-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  display: block;
  flex-shrink: 0;
  border: 1.5px solid rgba(255, 255, 255, 0.8);
}

.fb-reel-author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fb-reel-author-name {
  font-size: 15px;
  font-weight: 700;
  color: #ffffff !important;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 175px;
  display: inline-block;
}

.fb-reel-author-name:hover {
  text-decoration: underline !important;
}

.fb-reel-verified-badge {
  color: #1877f2;
  font-size: 14px;
  flex-shrink: 0;
}

.fb-reel-follow-btn {
  background: transparent;
  border: none;
  color: #ffffff;
  font-weight: 700;
  font-size: 13.5px;
  padding: 2px 4px;
  cursor: pointer;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  flex-shrink: 0;
  transition: opacity 0.15s ease;
}

.fb-reel-follow-btn:hover {
  text-decoration: underline;
}

.fb-reel-follow-btn.following {
  color: rgba(255, 255, 255, 0.75);
}

.fb-reel-caption {
  color: #ffffff;
  font-size: 13.5px;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
  height: 38px;
  max-height: 38px;
  overflow-y: auto;
  scrollbar-width: none;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.fb-reel-caption::-webkit-scrollbar {
  display: none;
}

.fb-reel-caption a {
  color: #ffffff !important;
  font-weight: 600;
  text-decoration: none;
}

.fb-reel-caption a:hover {
  text-decoration: underline;
}

.fb-reel-sound-line {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #e4e6eb;
  font-size: 12px;
  opacity: 0.9;
}

.fb-reel-translate {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.fb-reel-translate:hover {
  text-decoration: underline;
}

/* Right Action Buttons Column: Beside the video player */
.fb-reel-actions-column,
.fb-reel-center-stage .video-controlls {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  left: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  margin-bottom: 12px !important;
  flex-shrink: 0 !important;
  z-index: 20 !important;
}

.fb-actions-stack,
.fb-reel-center-stage .reel-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: center !important;
}

.fb-reel-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.fb-reel-circle-btn,
.fb-reel-actions-column .action-btn {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  border: none !important;
  backdrop-filter: blur(8px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 19px !important;
  padding: 0 !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
}

.fb-reel-circle-btn .reaction-btn,
.fb-reel-circle-btn .reaction-btn-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-reel-circle-btn:hover,
.fb-reel-actions-column .action-btn:hover {
  background: rgba(255, 255, 255, 0.32) !important;
  transform: scale(1.08) !important;
  color: #ffffff !important;
}

.fb-reel-action-count {
  font-size: 12px;
  font-weight: 600;
  color: #e4e6eb;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
  user-select: none;
}

.fb-reel-dropdown {
  background: #242526 !important;
  border: 1px solid #393a3b !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6) !important;
  padding: 6px 0 !important;
  min-width: 170px !important;
}

.fb-reel-dropdown .dropdown-item {
  color: #e4e6eb !important;
  font-size: 14px !important;
  padding: 10px 16px !important;
}

.fb-reel-dropdown .dropdown-item:hover {
  background: #3a3b3c !important;
  color: #ffffff !important;
}

/* Up / Down Navigation Arrows (Fixed on right side) */
body.reels .fb-reels-nav-arrows,
.fb-reels-nav-arrows {
  position: fixed !important;
  right: 32px !important;
  left: auto !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  z-index: 1000 !important;
}

.fb-reel-nav-btn,
.reel-prev-btn,
.reel-next-btn {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 20px !important;
  cursor: pointer !important;
  transition: transform 0.15s ease, background 0.15s ease !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  position: static !important;
}

.fb-reel-nav-btn:hover,
.reel-prev-btn:hover,
.reel-next-btn:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: scale(1.08) !important;
  color: #ffffff !important;
}

/* Comments Drawer (Side drawer) */
.reel-comments-wrapper,
.fb-reel-comments-drawer {
  display: none !important;
  position: fixed !important;
  top: 56px !important;
  bottom: 0 !important;
  width: 420px !important;
  max-width: 100% !important;
  background: #242526 !important;
  border-left: 1px solid #393a3b !important;
  z-index: 1000 !important;
  flex-direction: column !important;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.8) !important;
}

html[dir="LTR"] .reel-comments-wrapper,
html[dir="LTR"] .fb-reel-comments-drawer {
  right: 0 !important;
  left: auto !important;
  border-left: 1px solid #393a3b !important;
  border-right: none !important;
}

html[dir="RTL"] .reel-comments-wrapper,
html[dir="RTL"] .fb-reel-comments-drawer {
  left: 0 !important;
  right: auto !important;
  border-right: 1px solid #393a3b !important;
  border-left: none !important;
}

.reel-container.comments-shown .reel-comments-wrapper,
.reel-container.comments-shown .fb-reel-comments-drawer {
  display: flex !important;
}

.fb-comments-drawer-header {
  height: 56px;
  border-bottom: 1px solid #393a3b;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.fb-comments-title {
  font-size: 18px;
  font-weight: 700;
  color: #e4e6eb;
  margin: 0;
}

.fb-reel-lightbox {
  flex: 1;
  overflow-y: auto;
  background: #242526;
  color: #e4e6eb;
  padding: 12px;
}

.fb-reel-lightbox .post {
  background: transparent !important;
  border: none !important;
  color: #e4e6eb !important;
}

.fb-reel-lightbox .post-actions {
  border-color: #393a3b !important;
}

.fb-reel-lightbox .post-comment {
  border-color: #393a3b !important;
}

.fb-reel-mobile-topbar {
  position: absolute;
  top: 12px;
  left: 14px;
  right: 14px;
  z-index: 25;
  display: flex;
  justify-content: space-between;
  align-items: center;
  direction: ltr !important;
  pointer-events: none;
}

.fb-reel-mobile-topbar * {
  pointer-events: auto;
}

.fb-reel-mobile-title {
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: -0.3px;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  user-select: none;
}

.fb-reel-mobile-icons {
  display: flex;
  align-items: center;
  gap: 18px;
}

.fb-reel-mtop-btn {
  color: #ffffff !important;
  font-size: 20px;
  text-decoration: none !important;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.8));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s ease, opacity 0.12s ease;
}

.fb-reel-mtop-btn:active {
  transform: scale(0.92);
  opacity: 0.8;
}

/* Progress Line at bottom of video */
.fb-reel-progress-wrap {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  z-index: 35;
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  overflow: hidden;
}

.fb-reel-progress-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  transition: width 0.1s linear;
}

/* Mobile responsive adjustments - Facebook App replica */
@media (max-width: 991px) {

  body.reels .fb-reels-nav-arrows,
  .fb-reels-nav-arrows {
    display: none !important;
  }
}

@media (max-width: 767px) {

  /* Fix scrolling & overflow on mobile */
  body.reels {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
  }

  body.reels .main-wrapper {
    height: 100dvh !important;
    max-height: 100dvh !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Reels Mobile Header: Pure black, only Facebook tabs */
  body.reels .main-header {
    background: #000000 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    padding: 0 !important;
    height: 48px !important;
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
  }

  body.reels .main-header>.container,
  body.reels .main-header>.container-fluid,
  body.reels .main-header .fb-header {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
  }

  /* Hide the top row (logo, search, X close button) on mobile so ONLY the app tabs show */
  body.reels .fb-hrow {
    display: none !important;
  }

  /* Show only mobile tabs */
  body.reels .fb-mnav {
    display: flex !important;
    background: #000000 !important;
    border: none !important;
    padding: 0 4px !important;
    margin: 0 !important;
    width: 100% !important;
    height: 100% !important;
    align-items: center !important;
    justify-content: space-around !important;
  }

  body.reels .fb-mnav a {
    color: #90949c !important;
    height: 48px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 1 !important;
    position: relative !important;
    transition: color 0.15s ease !important;
    border-bottom: 3px solid transparent !important;
  }

  body.reels .fb-mnav a.active {
    color: #ffffff !important;
    border-bottom: 3px solid #ffffff !important;
  }

  body.reels .fb-mnav a svg {
    width: 24px !important;
    height: 24px !important;
    fill: currentColor !important;
  }

  /* Theater Shell & Video Box on Mobile */
  .fb-reels-theater-shell {
    width: 100vw !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
    max-height: calc(100dvh - 48px) !important;
    position: relative !important;
    overflow: hidden !important;
    background: #000000 !important;
  }

  body.reels .reels-wrapper {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  body.reels .reel-container {
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
  }

  body.reels .reel-container.hidden {
    display: none !important;
  }

  .fb-reel-stage {
    width: 100% !important;
    height: 100% !important;
    position: relative !important;
  }

  .fb-reel-center-stage {
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    position: relative !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .fb-reel-video-box {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    border-radius: 0 !important;
    aspect-ratio: auto !important;
    box-shadow: none !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
  }

  .fb-reel-video-box .plyr--video,
  .fb-reel-video-box .plyr__video-wrapper {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    background: #000000 !important;
  }

  .fb-reel-video-box video {
    object-fit: cover !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Hide default plyr top controls on mobile */
  .fb-reel-video-box .plyr__controls {
    display: none !important;
  }

  /* Sound icon on mobile: position cleanly below status/top area */
  .fb-reel-volume-btn {
    top: 52px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    z-index: 100 !important;
  }

  html[dir="RTL"] .fb-reel-volume-btn {
    right: auto !important;
    left: 12px !important;
  }

  /* Never show desktop up/down arrows on mobile */
  body.reels .fb-reels-nav-arrows,
  .fb-reels-nav-arrows {
    display: none !important;
  }

  .fb-reel-video-box::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 240px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.45) 60%, transparent 100%);
    pointer-events: none;
    z-index: 15;
  }

  /* Right Action Buttons Column - absolutely inside the video-box */
  .fb-reel-actions-column,
  .fb-reel-center-stage .video-controlls {
    position: fixed !important;
    right: 10px !important;
    left: auto !important;
    bottom: 24px !important;
    top: auto !important;
    margin-bottom: 0 !important;
    z-index: 1000 !important;
    width: auto !important;
  }

  .fb-actions-stack,
  .fb-reel-center-stage .reel-actions {
    gap: 14px !important;
    align-items: center !important;
  }

  .fb-reel-action-item {
    gap: 2px !important;
  }

  .fb-reel-circle-btn,
  .fb-reel-actions-column .action-btn {
    width: 38px !important;
    height: 38px !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    color: #ffffff !important;
    font-size: 26px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.9)) !important;
    transition: transform 0.12s ease !important;
  }

  .fb-reel-circle-btn:active {
    transform: scale(0.88) !important;
  }

  .fb-reel-circle-btn .reaction-btn-icon i,
  .fb-reel-circle-btn i {
    font-size: 26px !important;
    color: #ffffff !important;
  }

  .fb-reel-action-count {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
    letter-spacing: 0.2px !important;
  }

  /* Bottom Overlay: Creator, Caption, Sound */
  .fb-reel-bottom-overlay {
    position: fixed !important;
    bottom: 14px !important;
    left: 12px !important;
    right: 72px !important;
    padding: 0 !important;
    background: transparent !important;
    z-index: 900 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    pointer-events: none !important;
    text-align: start !important;
  }

  .fb-reel-bottom-overlay * {
    pointer-events: auto !important;
  }

  html[dir="RTL"] .fb-reel-bottom-overlay {
    text-align: right !important;
  }

  html[dir="LTR"] .fb-reel-bottom-overlay {
    text-align: left !important;
  }

  .fb-reel-author-row {
    gap: 8px !important;
    align-items: center !important;
  }

  .fb-reel-author-avatar {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1.5px solid rgba(255, 255, 255, 0.8) !important;
  }

  .fb-reel-author-name {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  }

  .fb-reel-follow-btn {
    background: rgba(0, 0, 0, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 6px !important;
    padding: 3px 10px !important;
    color: #ffffff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    backdrop-filter: blur(4px) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    line-height: 1.2 !important;
  }

  .fb-reel-follow-btn i {
    font-size: 10px !important;
  }

  .fb-reel-caption {
    font-size: 14px !important;
    line-height: 1.35 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.95) !important;
    max-height: 60px !important;
    overflow: hidden !important;
  }

  .fb-reel-sound-line {
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* Progress Line at the bottom edge */
  .fb-reel-progress-wrap {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2.5px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    z-index: 35 !important;
    border-radius: 0 !important;
  }

  .fb-reel-progress-fill {
    height: 100% !important;
    width: 0%;
    background: #ffffff !important;
    transition: width 0.1s linear !important;
  }

  /* Comments Drawer */
  .reel-comments-wrapper,
  .fb-reel-comments-drawer {
    width: 100vw !important;
    max-width: 100vw !important;
    top: 48px !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border: none !important;
    z-index: 2000 !important;
  }
}

/* ============================================================
   DS Portal Styling: Games, Movies, Forums (matching Courses)
   ============================================================ */

/* Forum Elements within ds-page */
.ds-page-main .forum-category {
  background: var(--ds-surface-el) !important;
  color: var(--ds-text-primary) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px 12px 0 0 !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  margin-top: 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

.ds-page-main .forum-category a {
  color: var(--ds-text-primary) !important;
  text-decoration: none !important;
}

.ds-page-main .forum-category a:hover {
  color: var(--ds-primary) !important;
}

.ds-page-main .forum-head {
  border-left: 1px solid var(--ds-border) !important;
  border-right: 1px solid var(--ds-border) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ds-page-main .forum-head>.column {
  background: var(--ds-surface-sec) !important;
  color: var(--ds-text-secondary) !important;
  border: none !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  padding: 12px 16px !important;
}

.ds-page-main .forum-head.threads>.column {
  background: var(--ds-surface-sec) !important;
  border: none !important;
  border-bottom: 1px solid var(--ds-border) !important;
}

.ds-page-main .forum-row {
  border-left: 1px solid var(--ds-border) !important;
  border-right: 1px solid var(--ds-border) !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transition: background 0.15s ease !important;
}

.ds-page-main .forum-row:last-child {
  border-bottom: 1px solid var(--ds-border) !important;
  border-radius: 0 0 12px 12px !important;
}

.ds-page-main .forum-row>.column {
  background: var(--ds-surface-el) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  color: var(--ds-text-secondary) !important;
  padding: 16px 20px !important;
  font-size: 13px !important;
}

.ds-page-main .forum-row:hover>.column {
  background: var(--ds-surface-sec) !important;
}

.ds-page-main .forum-meta-head {
  background: var(--ds-surface-sec) !important;
  color: var(--ds-text-primary) !important;
  border: 1px solid var(--ds-border) !important;
  border-top: none !important;
  padding: 12px 16px !important;
  font-weight: 600 !important;
  font-size: 13px !important;
}

.ds-page-main .forum-meta-conent {
  background: var(--ds-surface-el) !important;
  color: var(--ds-text-secondary) !important;
  border: 1px solid var(--ds-border) !important;
  border-top: none !important;
  padding: 16px 20px !important;
  font-size: 13px !important;
}

.ds-page-main .forum-meta-conent:last-child {
  border-radius: 0 0 12px 12px !important;
}

.ds-page-main .forum-breadcrumb {
  background: transparent !important;
  padding: 0 !important;
  margin-bottom: 15px !important;
}

.ds-page-main .forum-thread {
  background: var(--ds-surface-el) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: 12px !important;
  padding: 20px !important;
  margin-bottom: 20px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}

/* Movie Cards within ds-page */
.ds-page-main .movie-card {
  border-radius: 12px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface-el) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.ds-page-main .movie-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.ds-page-main .movie-card .movie-picture {
  border-radius: 11px 11px 0 0 !important;
}

.ds-page-main .movie-card-bottom {
  background: var(--ds-surface-el) !important;
  color: var(--ds-text-primary) !important;
}

.ds-page-main .movie-card-bottom .movie-title {
  color: var(--ds-text-primary) !important;
}

/* Game Cards within ds-page */
.ds-page-main .ui-box {
  border-radius: 12px !important;
  border: 1px solid var(--ds-border) !important;
  background: var(--ds-surface-el) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.ds-page-main .ui-box:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

.ds-page-main .ui-box a.h6 {
  color: var(--ds-text-primary) !important;
}

/* ============================================================
   FACEBOOK MODERN POST CARD & COMMENTS DESIGN SYSTEM
   Matches official Facebook web & app post feed presentation
   ============================================================ */

/* 1. Post Card Container */
.post,
.fb-shell .post {
  background: #ffffff !important;
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 16px !important;
  font-family: var(--fb-font-family) !important;
  position: relative !important;
}

body.night-mode .post,
body.night-mode .fb-shell .post {
  background: var(--fb-dark-card) !important;
  border-color: var(--fb-dark-divider) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Post Header */
.post-header,
.fb-shell .post-header {
  padding: 12px 16px 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  position: relative !important;
}

.post-header .post-avatar,
.fb-shell .post-header .post-avatar {
  margin-right: 10px !important;
  position: relative !important;
}

html[dir="RTL"] .post-header .post-avatar,
html[dir="RTL"] .fb-shell .post-header .post-avatar {
  margin-right: 0 !important;
  margin-left: 10px !important;
}

.post-header .post-avatar-picture,
.fb-shell .post-header .post-avatar-picture {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
}

.post-header .post-avatar .online-dot {
  position: absolute !important;
  bottom: 0 !important;
  right: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: #31a24c !important;
  border: 2px solid #fff !important;
}

.post-header .post-meta,
.fb-shell .post-header .post-meta {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.post-header .post-author,
.fb-shell .post-header .post-author {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  text-decoration: none !important;
  line-height: 1.33 !important;
  display: inline-block !important;
}

body.night-mode .post-header .post-author,
body.night-mode .fb-shell .post-header .post-author {
  color: var(--fb-dark-text) !important;
}

.post-header .post-author:hover {
  text-decoration: underline !important;
}

.post-header .verified-badge {
  display: inline-flex !important;
  align-items: center !important;
  margin-left: 4px !important;
  vertical-align: -2px !important;
}

.post-header .post-time,
.fb-shell .post-header .post-time {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  line-height: 1.25 !important;
  margin-top: 2px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

body.night-mode .post-header .post-time,
body.night-mode .fb-shell .post-header .post-time {
  color: var(--fb-dark-muted) !important;
}

.post-header .post-time a {
  color: inherit !important;
  text-decoration: none !important;
}

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

/* Header Top-Right Action Buttons (... and X) */
.fb-post-header-actions {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fb-post-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  cursor: pointer !important;
  font-size: 17px !important;
  transition: background 0.15s ease !important;
  user-select: none !important;
}

body.night-mode .fb-post-action-btn {
  color: var(--fb-dark-muted) !important;
}

.fb-post-action-btn:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
}

body.night-mode .fb-post-action-btn:hover {
  background: var(--fb-dark-hover) !important;
  color: var(--fb-dark-text) !important;
}

.fb-post-action-btn::after {
  display: none !important;
}

/* 3. Post Text Content */
.post-body .post-text,
.fb-shell .post-body .post-text {
  padding: 4px 16px 12px !important;
  font-size: 15px !important;
  line-height: 1.3333 !important;
  color: #050505 !important;
  word-break: break-word !important;
}

body.night-mode .post-body .post-text,
body.night-mode .fb-shell .post-body .post-text {
  color: var(--fb-dark-text) !important;
}

.post-body .post-text .text-link,
.post-body .post-text .readmore-btn {
  font-weight: 600 !important;
  color: #050505 !important;
  cursor: pointer !important;
}

body.night-mode .post-body .post-text .text-link,
body.night-mode .post-body .post-text .readmore-btn {
  color: var(--fb-dark-text) !important;
}

.post-body .js_translator {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  cursor: pointer !important;
  display: inline-block !important;
  margin-top: 4px !important;
}

.post-body .js_translator:hover {
  text-decoration: underline !important;
}

/* 4. Link & Media Card Preview (War Thunder Style) */
.fb-link-card {
  margin: 0 !important;
  width: 100% !important;
  border-top: 1px solid #e4e6eb !important;
  border-bottom: 1px solid #e4e6eb !important;
  background: #f0f2f5 !important;
  overflow: hidden !important;
}

body.night-mode .fb-link-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.fb-link-cover {
  display: block !important;
  position: relative !important;
  width: 100% !important;
  overflow: hidden !important;
  background: #000 !important;
}

.fb-link-cover img {
  width: 100% !important;
  height: auto !important;
  max-height: 520px !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-link-details {
  background: #f0f2f5 !important;
  padding: 10px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.night-mode .fb-link-details {
  background: #242526 !important;
}

.fb-link-info {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.fb-link-info .source {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  margin-bottom: 3px !important;
}

body.night-mode .fb-link-info .source {
  color: #b0b3b8 !important;
}

.fb-link-info .title {
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  text-decoration: none !important;
  line-height: 1.25 !important;
  margin-bottom: 3px !important;
}

body.night-mode .fb-link-info .title {
  color: var(--fb-dark-text) !important;
}

.fb-link-info .text {
  display: -webkit-box !important;
  -webkit-line-clamp: 1 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  font-size: 13px !important;
  color: #65676b !important;
  line-height: 1.3 !important;
}

body.night-mode .fb-link-info .text {
  color: #b0b3b8 !important;
}

.fb-cta-btn {
  background: #e4e6eb !important;
  color: #050505 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 7px 14px !important;
  border-radius: 6px !important;
  border: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

body.night-mode .fb-cta-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-cta-btn:hover {
  background: #d8dadf !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .fb-cta-btn:hover {
  background: #4e4f50 !important;
}

/* 6. Post Action Buttons Bar (Like, Comment, Share) */
.post-actions,
.fb-shell .post-actions {
  margin: 0 16px !important;
  padding: 4px 0 !important;
  border-top: 1px solid #e4e6eb !important;
  border-bottom: 1px solid #e4e6eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 4px !important;
}

body.night-mode .post-actions,
body.night-mode .fb-shell .post-actions {
  border-color: #3e4042 !important;
}

.post-actions .action-btn {
  flex: 1 1 0 !important;
  height: 36px !important;
  border-radius: 6px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  padding: 0 8px !important;
  user-select: none !important;
}

body.night-mode .post-actions .action-btn {
  color: #b0b3b8 !important;
}

.post-actions .action-btn:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .post-actions .action-btn:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.post-actions .action-btn .action-icon {
  font-size: 18px !important;
  line-height: 1 !important;
}

.fb-share-icon {
  transform: scaleX(-1) !important;
}

html[dir="RTL"] .fb-share-icon {
  transform: scaleX(1) !important;
}

.post-actions .action-btn .reaction-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.post-actions .action-btn.js_unreact-post .reaction-btn-name {
  font-weight: 600 !important;
}

/* 7. Comments Section (Facebook Bubble Styling) */
.post-footer {
  background: transparent !important;
  border-top: none !important;
  padding: 12px 16px 16px !important;
}

.post-comments .js_see-more {
  padding: 6px 0 !important;
  text-align: left !important;
}

html[dir="RTL"] .post-comments .js_see-more {
  text-align: right !important;
}

.post-comments .js_see-more .text-link {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  cursor: pointer !important;
}

.post-comments .js_see-more .text-link:hover {
  text-decoration: underline !important;
}

.comment {
  padding-bottom: 8px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
  position: relative !important;
}

.comment .comment-avatar {
  float: none !important;
  flex: 0 0 auto !important;
}

.comment .comment-avatar-picture {
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  border-radius: 50% !important;
}

.comment .comment-data {
  margin-left: 0 !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

.comment-inner-wrapper {
  margin-bottom: 3px !important;
  display: block !important;
}

.comment-inner {
  background-color: #f0f2f5 !important;
  border-radius: 18px !important;
  padding: 8px 12px !important;
  box-shadow: none !important;
  display: inline-block !important;
  max-width: 100% !important;
  position: relative !important;
}

body.night-mode .comment-inner {
  background-color: #3a3b3c !important;
}

.comment-inner:before {
  display: none !important;
}

.comment-author {
  font-size: 13px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  margin-bottom: 2px !important;
}

.comment-author a {
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .comment-author a {
  color: var(--fb-dark-text) !important;
}

.comment-author a:hover {
  text-decoration: underline !important;
}

.comment-text {
  font-size: 14px !important;
  line-height: 1.35 !important;
  color: #050505 !important;
  margin-bottom: 0 !important;
}

body.night-mode .comment-text {
  color: var(--fb-dark-text) !important;
}

.comment-actions {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 3px !important;
  padding-left: 8px !important;
  list-style: none !important;
}

html[dir="RTL"] .comment-actions {
  padding-left: 0 !important;
  padding-right: 8px !important;
}

.comment-actions>li {
  float: none !important;
  margin-right: 0 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #65676b !important;
}

body.night-mode .comment-actions>li {
  color: #b0b3b8 !important;
}

.comment-actions a,
.comment-actions span.text-link,
.comment-actions small {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

body.night-mode .comment-actions a,
body.night-mode .comment-actions span.text-link,
body.night-mode .comment-actions small {
  color: #b0b3b8 !important;
}

.comment-actions a:hover,
.comment-actions span.text-link:hover {
  text-decoration: underline !important;
}

.fb-replies-toggle {
  margin-left: 36px !important;
  margin-top: 4px !important;
}

html[dir="RTL"] .fb-replies-toggle {
  margin-left: 0 !important;
  margin-right: 36px !important;
}

.fb-replies-toggle-link {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
}

.fb-replies-toggle-link:hover {
  text-decoration: underline !important;
}

.comment-form textarea {
  background: #f0f2f5 !important;
  border-radius: 20px !important;
  font-size: 14px !important;
  border: 1px solid transparent !important;
  transition: all 0.15s ease !important;
}

body.night-mode .comment-form textarea {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.comment-form textarea:focus {
  background: #fff !important;
  border-color: #0866ff !important;
}

body.night-mode .comment-form textarea:focus {
  background: #242526 !important;
}

/* Comment Reaction Pill Badge (Facebook floating badge) */
.comment-actions .reactions-stats {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 1px 6px 1px 3px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 2px !important;
  cursor: pointer !important;
  vertical-align: middle !important;
}

body.night-mode .comment-actions .reactions-stats {
  background: #3a3b3c !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

.comment-actions .reactions-stats-item {
  width: 16px !important;
  height: 16px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  margin-right: -3px !important;
}

.comment-actions .reactions-stats-item .inline-emoji img {
  width: 15px !important;
  height: 15px !important;
}

.comment-actions .reactions-stats span {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  margin-left: 4px !important;
}

body.night-mode .comment-actions .reactions-stats span {
  color: #b0b3b8 !important;
}

/* Comment Three-Dots Button (Floating on hover) */
.comment .comment-data {
  position: relative !important;
}

.comment .comment-btn {
  position: absolute !important;
  right: 0 !important;
  top: 4px !important;
  opacity: 0 !important;
  transition: opacity 0.15s ease !important;
  z-index: 2 !important;
}

html[dir="RTL"] .comment .comment-btn {
  right: auto !important;
  left: 0 !important;
}

.comment:hover .comment-btn {
  opacity: 1 !important;
}

.comment-btn .dropdown-toggle-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  font-size: 13px !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
}

.comment-btn .dropdown-toggle-icon:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
}

body.night-mode .comment-btn .dropdown-toggle-icon {
  color: #b0b3b8 !important;
}

body.night-mode .comment-btn .dropdown-toggle-icon:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* Ensure Post Card is perfectly centered & matches Facebook card width */
.post {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  border: 1px solid #ced0d4 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.night-mode .post {
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================================
   SMART ADAPTIVE POST MEDIA & CARD SIZING (Facebook System)
   Handles Portrait, Landscape, Square, Reels, and Videos seamlessly
   without dead space or awkward margins
   ============================================================ */

/* 1. Post Text & Zero Wasted Space */
.post-body {
  position: relative !important;
}

.post-body .post-text {
  padding: 4px 16px 8px 16px !important;
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.3333 !important;
  color: #050505 !important;
  word-break: break-word !important;
}

body.night-mode .post-body .post-text {
  color: var(--fb-dark-text) !important;
}

.post-body .post-text:empty {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 2. Photo Grid & Single Photo Full-Bleed & Aspect Ratio Handling */
.fb-photos-wrapper,
.post .pg_wrapper {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000000 !important;
}

/* Single Photo (Adaptive Height & Fit for Portrait, Square & Landscape) */
.pg_1x {
  width: 100% !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  position: relative !important;
  max-height: 720px !important;
}

.pg_1x a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  background: transparent !important;
}

.pg_1x img {
  width: 100% !important;
  height: auto !important;
  max-height: 720px !important;
  object-fit: contain !important;
  display: block !important;
  margin: 0 auto !important;
}

/* Two Photos: 50% split with 2px divider */
.pg_2x {
  width: 50% !important;
  float: left !important;
  height: 380px !important;
  padding: 0 !important;
  border-right: 2px solid #fff !important;
  overflow: hidden !important;
}

html[dir="RTL"] .pg_2x {
  float: right !important;
  border-right: none !important;
  border-left: 2px solid #fff !important;
}

body.night-mode .pg_2x {
  border-color: var(--fb-dark-card) !important;
}

.pg_2x:last-child {
  border: none !important;
}

.pg_2x>a {
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  display: block !important;
  background-size: cover !important;
  background-position: center !important;
}

/* Three & Four Photos Grid */
.pg_3x,
.pg_4x {
  display: flex !important;
  width: 100% !important;
  height: 420px !important;
  overflow: hidden !important;
}

.pg_2o3 {
  width: 66.666% !important;
  height: 100% !important;
  float: none !important;
  margin: 0 !important;
  border-right: 2px solid #fff !important;
}

html[dir="RTL"] .pg_2o3 {
  border-right: none !important;
  border-left: 2px solid #fff !important;
}

body.night-mode .pg_2o3 {
  border-color: var(--fb-dark-card) !important;
}

.pg_2o3 .pg_2o3_in {
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
}

.pg_2o3 .pg_2o3_in a {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

.pg_1o3 {
  width: 33.334% !important;
  height: 100% !important;
  float: none !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}

.pg_1o3 .pg_1o3_in {
  flex: 1 !important;
  width: 100% !important;
  margin-bottom: 2px !important;
  overflow: hidden !important;
  position: relative !important;
}

.pg_1o3 .pg_1o3_in:last-child {
  margin-bottom: 0 !important;
}

.pg_1o3 .pg_1o3_in a {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
}

.pg_wrapper .more {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-top: 0 !important;
  font-size: 28px !important;
  font-weight: 700 !important;
  background: rgba(0, 0, 0, 0.45) !important;
  backdrop-filter: blur(2px) !important;
}

/* 3. Regular Video Handling (Full-width edge-to-edge, capped height) */
.fb-video-wrapper {
  width: 100% !important;
  margin: 0 !important;
  background: #000000 !important;
  overflow: hidden !important;
}

.fb-video-wrapper .plyr,
.fb-video-wrapper video {
  width: 100% !important;
  max-height: 580px !important;
  background: #000000 !important;
  display: block !important;
  margin: 0 auto !important;
}

.fb-video-wrapper video {
  object-fit: contain !important;
}

/* 4. Reels Handling (Vertical 9:16 Theater Layout) */
.fb-reel-wrapper {
  width: 100% !important;
  margin: 0 !important;
  background: #000000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-height: 600px !important;
  overflow: hidden !important;
}

.fb-reel-wrapper .plyr,
.fb-reel-wrapper video {
  width: auto !important;
  max-width: 360px !important;
  height: 100% !important;
  max-height: 600px !important;
  aspect-ratio: 9 / 16 !important;
  margin: 0 auto !important;
  display: block !important;
  object-fit: cover !important;
}

/* 5. Shared Post Embeds & Link Cards */
.post-snippet {
  margin: 8px 16px !important;
  border: 1px solid #ced0d4 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
}

body.night-mode .post-snippet {
  border-color: #3e4042 !important;
}

.post-snippet .post {
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 0 !important;
  border-radius: 0 !important;
}

/* 6. Tight Layout Distribution (Zero Wasted Space) */
.post {
  padding-bottom: 0 !important;
  margin-bottom: 16px !important;
}

/* Stats Row: Ultra-compact, single line, zero wrap */
.post-stats,
.fb-shell .post-stats {
  padding: 4px 16px !important;
  margin: 0 !important;
  min-height: 32px !important;
  height: 32px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  border-bottom: 1px solid #e4e6eb !important;
  font-size: 13px !important;
  line-height: 1 !important;
  color: #65676b !important;
  overflow: hidden !important;
}

body.night-mode .post-stats,
body.night-mode .fb-shell .post-stats {
  border-bottom-color: #3e4042 !important;
  color: #b0b3b8 !important;
}

.post-stats .js_post-reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.post-stats .reactions-stats {
  display: inline-flex !important;
  align-items: center !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}

.post-stats .reactions-stats-item {
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 2px #fff !important;
  margin-right: -3px !important;
  position: relative !important;
  z-index: 1 !important;
}

body.night-mode .post-stats .reactions-stats-item {
  box-shadow: 0 0 0 2px var(--fb-dark-card) !important;
}

html[dir="RTL"] .post-stats .reactions-stats-item {
  margin-right: 0 !important;
  margin-left: -3px !important;
}

.post-stats .reactions-stats-item img {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

.post-stats .reactions-stats span {
  display: inline-block !important;
  margin-left: 6px !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

html[dir="RTL"] .post-stats .reactions-stats span {
  margin-left: 0 !important;
  margin-right: 6px !important;
}

body.night-mode .post-stats .reactions-stats span {
  color: #b0b3b8 !important;
}

.post-stats .float-end {
  float: none !important;
  margin-left: auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 8px !important;
  white-space: nowrap !important;
}

html[dir="RTL"] .post-stats .float-end {
  margin-left: 0 !important;
  margin-right: auto !important;
  justify-content: flex-start !important;
}

.post-stats .float-end span,
.post-stats .float-end a,
.post-stats .float-end .pointer {
  font-size: 13px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.post-stats .float-end span:hover,
.post-stats .float-end a:hover,
.post-stats .float-end .pointer:hover {
  text-decoration: underline !important;
}

body.night-mode .post-stats .float-end span,
body.night-mode .post-stats .float-end a,
body.night-mode .post-stats .float-end .pointer {
  color: #b0b3b8 !important;
}

/* Action Buttons: Flush with Stats */
.post-actions,
.fb-shell .post-actions {
  margin: 0 16px !important;
  padding: 3px 0 !important;
  border-top: none !important;
  border-bottom: 1px solid #e4e6eb !important;
}

body.night-mode .post-actions,
body.night-mode .fb-shell .post-actions {
  border-bottom-color: #3e4042 !important;
}

/* Comments Footer: Compact spacing */
.post-footer {
  padding: 8px 16px 12px !important;
}

.post-comments .comment-form {
  margin-bottom: 8px !important;
}

/* ============================================================
   Facebook Native Video Player & YouTube Integration
   ============================================================ */
:root {
  --plyr-color-main: #1877f2;
  --plyr-video-control-color-hover: #fff;
  --plyr-video-control-background-hover: #1877f2;
}

.fb-video-wrapper {
  position: relative;
  width: 100%;
  background: #000;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  max-height: 600px;
}

.fb-yt-wrapper {
  aspect-ratio: 16 / 9;
  max-height: 540px;
  background: #000;
}

.fb-native-yt-player {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

.fb-yt-poster {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease;
}

.fb-native-yt-player:hover .fb-yt-poster {
  filter: brightness(1.05);
}

.fb-yt-play-btn {
  width: 64px;
  height: 64px;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease;
}

.fb-yt-play-btn svg {
  margin-left: 4px;
}

.fb-native-yt-player:hover .fb-yt-play-btn {
  transform: scale(1.1);
  background: #1877f2;
  border-color: #fff;
}

/* Click Shield: covers YouTube top area to block external YouTube navigation */
.fb-yt-top-shield {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 62px;
  z-index: 2;
  cursor: pointer;
  background: transparent;
}

/* Watch Tile YouTube Thumbnail */
.ds-watch-thumb-yt {
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* Plyr Customizations for Facebook theme */
.plyr--video {
  width: 100%;
  height: 100%;
}

.plyr--video .plyr__controls {
  padding: 10px 14px;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
}

/* ============================================================
   Facebook Lightbox Theater
   ============================================================ */
.lightbox {
  background: rgba(0, 0, 0, 0.92) !important;
}

.lightbox-container {
  display: flex !important;
  flex-direction: row !important;
  height: 100vh !important;
  width: 100vw !important;
  max-width: 100vw !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
  box-shadow: none !important;
}

@media (max-width: 991.98px) {
  .lightbox-container {
    flex-direction: column !important;
    overflow-y: auto !important;
  }
}

.lightbox-preview {
  flex: 1 1 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  background: #000 !important;
  width: auto !important;
  max-width: none !important;
  height: 100% !important;
  overflow: hidden !important;
}

.lightbox-preview img {
  max-width: 100% !important;
  max-height: 100vh !important;
  object-fit: contain !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5) !important;
}

.lightbox-next,
.lightbox-prev {
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  opacity: 0.8 !important;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.3, 1) !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 10 !important;
}

.lightbox-next:hover,
.lightbox-prev:hover {
  background: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-50%) scale(1.1) !important;
  opacity: 1 !important;
}

.lightbox-next {
  right: 16px !important;
}

.lightbox-prev {
  left: 16px !important;
}

.lightbox-exit {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  top: 16px !important;
  right: 16px !important;
  opacity: 0.85 !important;
  transition: transform 0.2s ease, opacity 0.2s ease !important;
  z-index: 15 !important;
}

.lightbox-exit:hover {
  opacity: 1 !important;
  transform: scale(1.08) !important;
}

.lightbox-data {
  width: 380px !important;
  min-width: 380px !important;
  max-width: 380px !important;
  height: 100vh !important;
  background: #ffffff !important;
  border-left: 1px solid #e4e6eb !important;
  display: flex !important;
  flex-direction: column !important;
  z-index: 5 !important;
}

body.night-mode .lightbox-data {
  background: #242526 !important;
  border-left-color: #3e4042 !important;
}

@media (max-width: 991.98px) {
  .lightbox-data {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-left: none !important;
    border-top: 1px solid #e4e6eb !important;
  }
}

.lightbox-post {
  height: 100% !important;
  padding: 0 !important;
  overflow-y: auto !important;
}

/* ============================================================
   Facebook Who Reacted Modal
   ============================================================ */
.fb-who-reacts-header {
  padding: 0 16px !important;
  border-bottom: 1px solid #e4e6eb !important;
}

body.night-mode .fb-who-reacts-header {
  border-bottom-color: #3e4042 !important;
}

.fb-reaction-tabs {
  border-bottom: none !important;
  gap: 8px !important;
  margin-bottom: -1px !important;
}

.fb-reaction-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  padding: 12px 14px !important;
  color: #65676b !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border-radius: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: transparent !important;
  transition: all 0.15s ease !important;
}

.fb-reaction-tabs .nav-link:hover {
  background: #f2f2f2 !important;
  color: #050505 !important;
  border-radius: 8px 8px 0 0 !important;
}

.fb-reaction-tabs .nav-link.active {
  color: #1877f2 !important;
  border-bottom-color: #1877f2 !important;
  background: transparent !important;
}

body.night-mode .fb-reaction-tabs .nav-link {
  color: #b0b3b8 !important;
}

body.night-mode .fb-reaction-tabs .nav-link:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-reaction-tabs .nav-link.active {
  color: #2e89ff !important;
  border-bottom-color: #2e89ff !important;
}

.fb-react-users-list {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-react-users-list .feeds-item {
  padding: 10px 16px !important;
  border-bottom: 1px solid #f0f2f5 !important;
  transition: background 0.15s ease !important;
}

body.night-mode .fb-react-users-list .feeds-item {
  border-bottom-color: #2f3031 !important;
}

.fb-react-users-list .feeds-item:hover {
  background: #f2f2f2 !important;
}

body.night-mode .fb-react-users-list .feeds-item:hover {
  background: #303031 !important;
}

.data-avatar {
  position: relative !important;
}

.data-reaction {
  position: absolute !important;
  bottom: -4px !important;
  right: -4px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.night-mode .data-reaction {
  background: #242526 !important;
}

.data-reaction .inline-emoji img {
  width: 16px !important;
  height: 16px !important;
}

/* ============================================================
   Facebook Comment Form Tools
   ============================================================ */
.x-form-tools {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.x-form-tools li {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  cursor: pointer !important;
  transition: background 0.15s ease, color 0.15s ease !important;
}

.x-form-tools li:hover {
  background: #e4e6eb !important;
  color: #050505 !important;
}

.x-form-tools li.x-form-tools-post {
  color: #1877f2 !important;
}

.x-form-tools li.x-form-tools-post:hover {
  background: #e7f3ff !important;
}

body.night-mode .x-form-tools li {
  color: #b0b3b8 !important;
}

body.night-mode .x-form-tools li:hover {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .x-form-tools li.x-form-tools-post:hover {
  background: rgba(46, 137, 255, 0.2) !important;
}

/* ==========================================================================
   Facebook Popover Card & Share Sheet Enhancements
   ========================================================================== */
.fb-popover-card {
  width: 360px !important;
  max-width: 95vw !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.1) !important;
  background: #ffffff !important;
  border: 1px solid #e4e6eb !important;
}

body.night-mode .fb-popover-card {
  background: #242526 !important;
  border-color: #393a3b !important;
  box-shadow: 0 12px 28px 0 rgba(0, 0, 0, 0.5) !important;
}

.fb-popover-card .user-card {
  position: relative !important;
  padding-bottom: 8px !important;
}

.fb-popover-card .user-card-cover {
  height: 110px !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #2e3842 !important;
}

.fb-popover-card .user-card-avatar {
  position: absolute !important;
  top: 65px !important;
  left: 16px !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px #ffffff !important;
  overflow: hidden !important;
  width: 80px !important;
  height: 80px !important;
}

body.night-mode .fb-popover-card .user-card-avatar {
  box-shadow: 0 0 0 4px #242526 !important;
}

html[dir="RTL"] .fb-popover-card .user-card-avatar {
  left: auto !important;
  right: 16px !important;
}

.fb-popover-card .user-card-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.fb-popover-card .user-card-info {
  margin-top: 42px !important;
  padding: 0 16px !important;
}

.fb-popover-card .user-card-info .name {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  display: inline-block !important;
}

body.night-mode .fb-popover-card .user-card-info .name {
  color: #e4e6eb !important;
}

.fb-popover-card .user-card-meta {
  color: #65676b !important;
  font-size: 13.5px !important;
}

body.night-mode .fb-popover-card .user-card-meta {
  color: #b0b3b8 !important;
}

.fb-share-copy-box {
  transition: background-color 0.2s ease !important;
}

.fb-share-copy-box:hover {
  background: #e4e6eb !important;
}

body.night-mode .fb-share-copy-box {
  background: #3a3b3c !important;
  border-color: #3e4042 !important;
}

body.night-mode .fb-share-copy-box:hover {
  background: #4e4f50 !important;
}

/* Notifications Page Styling */
.fb-notifications-full-list .feeds-action-item {
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
  margin-bottom: 2px !important;
}

.fb-notifications-full-list .feeds-action-item:hover {
  background: #f0f2f5 !important;
}

body.night-mode .fb-notifications-full-list .feeds-action-item:hover {
  background: #3a3b3c !important;
}

.fb-notifications-full-list .feeds-action-item.unread {
  background: rgba(24, 119, 242, 0.08) !important;
}

body.night-mode .fb-notifications-full-list .feeds-action-item.unread {
  background: rgba(45, 136, 255, 0.15) !important;
}

/* ==========================================================================
   Facebook Feed Reels Tray (Mobile Screenshot 795066754_1729894441612219... & Desktop)
   ========================================================================== */
li.fb-reels-tray-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-reels-tray-card {
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
}

body.night-mode .fb-reels-tray-card {
  background: #242526 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Card Header */
.fb-reels-tray-header {
  padding: 12px 16px 8px 16px !important;
  background: transparent !important;
  border-bottom: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.fb-reels-tray-title {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  line-height: 1.2 !important;
}

body.night-mode .fb-reels-tray-title {
  color: #e4e6eb !important;
}

.fb-reels-tray-icon {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  color: #050505 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.night-mode .fb-reels-tray-icon {
  color: #e4e6eb !important;
}

.fb-reels-tray-icon svg {
  width: 100% !important;
  height: 100% !important;
}

.fb-reels-tray-options .fb-reels-dots-btn {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: #65676b !important;
  font-size: 15px !important;
  transition: background 0.15s ease, color 0.15s ease !important;
  padding: 0 !important;
}

.fb-reels-tray-options .fb-reels-dots-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #050505 !important;
}

body.night-mode .fb-reels-tray-options .fb-reels-dots-btn {
  color: #b0b3b8 !important;
}

body.night-mode .fb-reels-tray-options .fb-reels-dots-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffffff !important;
}

/* Card Body */
.fb-reels-tray-body {
  padding: 4px 12px 14px 12px !important;
}

/* Slider / Container */
.fb-reels-tray-slider.reels-box-wrapper {
  position: relative !important;
}

/* Reel Card Box */
.reel-box.fb-reel-card {
  position: relative !important;
  display: block !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  background-color: #000000 !important;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  user-select: none !important;
}

/* Video / Poster / Image in Card */
.reel-box.fb-reel-card video,
.reel-box.fb-reel-card .fb-reel-card-thumb,
.reel-box.fb-reel-card .fb-reel-card-video {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: inherit !important;
  pointer-events: none !important;
  transition: transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
}

.reel-box.fb-reel-card:hover .fb-reel-card-thumb,
.reel-box.fb-reel-card:hover .fb-reel-card-video,
.reel-box.fb-reel-card:hover video {
  transform: scale(1.06) !important;
}

.reel-box.fb-reel-card .plyr,
.reel-box.fb-reel-card .plyr__video-wrapper {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: inherit !important;
  pointer-events: none !important;
}

/* Card Placeholder when no image */
.reel-box.fb-reel-card .fb-reel-card-placeholder {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
  color: rgba(255, 255, 255, 0.35) !important;
  font-size: 38px !important;
}

/* Center Play Button on Hover */
.reel-box.fb-reel-card .fb-reel-card-play {
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) scale(0.8) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.55) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 16px !important;
  z-index: 3 !important;
  opacity: 0 !important;
  transition: all 0.22s ease !important;
  pointer-events: none !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.reel-box.fb-reel-card:hover .fb-reel-card-play {
  opacity: 1 !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

/* Card Top Right Dots */
.fb-reel-card-dots {
  position: absolute !important;
  top: 10px !important;
  inset-inline-end: 10px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.38) !important;
  backdrop-filter: blur(4px) !important;
  -webkit-backdrop-filter: blur(4px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  font-size: 13px !important;
  z-index: 5 !important;
  pointer-events: none !important;
  transition: background 0.15s ease !important;
}

/* Card Bottom Overlay with Author & Views */
.fb-reel-card-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  min-height: 72px !important;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.4) 65%, transparent 100%) !important;
  z-index: 4 !important;
  pointer-events: none !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  padding: 10px 10px !important;
}

.fb-reel-card-author {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 3px !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.fb-reel-card-avatar {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  border: 1.5px solid #ffffff !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fb-reel-card-author-name {
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fb-reel-card-views {
  color: #ffffff !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  line-height: 1 !important;
}

.fb-reel-card-views i.fa-play {
  font-size: 10px !important;
}

/* Slick Carousel Styling (Facebook desktop & mobile) */
.fb-reels-tray-slider .slick-list {
  overflow: visible !important;
  clip-path: inset(0 -100px 0 -100px);
}

.fb-reels-tray-slider .slick-track {
  display: flex !important;
  align-items: center !important;
}

.fb-reels-tray-slider .slick-slide {
  outline: none !important;
  margin: 0 5px !important;
}

/* Desktop Styles */
@media (min-width: 768px) {
  .reel-box.fb-reel-card {
    width: 210px !important;
    height: 370px !important;
    transition: transform 0.22s cubic-bezier(0.2, 0, 0.2, 1), box-shadow 0.22s ease !important;
  }

  .reel-box.fb-reel-card:hover {
    transform: scale(1.025) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  }

  /* Desktop floating circular arrows */
  .fb-reels-tray-slider .slick-prev,
  .fb-reels-tray-slider .slick-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25) !important;
    z-index: 12 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .fb-reels-tray-slider .slick-prev {
    left: -14px !important;
  }

  .fb-reels-tray-slider .slick-next {
    right: -14px !important;
  }

  body[dir="rtl"] .fb-reels-tray-slider .slick-prev {
    left: auto !important;
    right: -14px !important;
  }

  body[dir="rtl"] .fb-reels-tray-slider .slick-next {
    right: auto !important;
    left: -14px !important;
  }

  body.night-mode .fb-reels-tray-slider .slick-prev,
  body.night-mode .fb-reels-tray-slider .slick-next {
    background: #3e4042 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6) !important;
  }

  .fb-reels-tray-slider .slick-prev:hover,
  .fb-reels-tray-slider .slick-next:hover {
    transform: translateY(-50%) scale(1.08) !important;
    background: #f0f2f5 !important;
  }

  body.night-mode .fb-reels-tray-slider .slick-prev:hover,
  body.night-mode .fb-reels-tray-slider .slick-next:hover {
    background: #4e4f50 !important;
  }

  .fb-reels-tray-slider .slick-prev:before,
  .fb-reels-tray-slider .slick-next:before {
    font-family: 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 16px !important;
    color: #1c1e21 !important;
    opacity: 1 !important;
    text-shadow: none !important;
    line-height: 1 !important;
  }

  body.night-mode .fb-reels-tray-slider .slick-prev:before,
  body.night-mode .fb-reels-tray-slider .slick-next:before {
    color: #e4e6eb !important;
  }

  .fb-reels-tray-slider .slick-prev:before {
    content: "\f053" !important;
  }

  .fb-reels-tray-slider .slick-next:before {
    content: "\f054" !important;
  }

  body[dir="rtl"] .fb-reels-tray-slider .slick-prev:before {
    content: "\f054" !important;
  }

  body[dir="rtl"] .fb-reels-tray-slider .slick-next:before {
    content: "\f053" !important;
  }
}

/* Mobile Styles (matches screenshot 795066754_1729894441612219_5965307459058788858_n.jpg) */
@media (max-width: 767.98px) {
  .fb-reels-tray-card {
    border-radius: 0 !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    border-left: none !important;
    border-right: none !important;
  }

  .fb-reels-tray-header {
    padding: 12px 14px 8px 14px !important;
  }

  .fb-reels-tray-title {
    font-size: 17px !important;
  }

  .fb-reels-tray-body {
    padding: 4px 8px 14px 8px !important;
  }

  .fb-reels-tray-slider .slick-arrow {
    display: none !important;
  }

  /* Reel Card on Mobile - width takes ~65vw so the next card peeks smoothly as in the Facebook app */
  .reel-box.fb-reel-card {
    width: 220px !important;
    height: 380px !important;
    max-width: 68vw !important;
    border-radius: 16px !important;
    margin: 0 4px !important;
  }

  /* Fallback horizontal scroll if slick is not active */
  .fb-reels-tray-slider:not(.slick-initialized) {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 0 4px !important;
  }

  .fb-reels-tray-slider:not(.slick-initialized)::-webkit-scrollbar {
    display: none !important;
  }

  .fb-reels-tray-slider:not(.slick-initialized) .reel-box.fb-reel-card {
    flex: 0 0 220px !important;
    scroll-snap-align: start !important;
  }
}

/* ==========================================================================
   Facebook Groups Page Redesign (Mobile Screenshot group/1 (4).jpg & Desktop)
   ========================================================================== */

/* Overall Page container */
.fb-groups-page .fb-groups-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 16px 40px 16px;
}

/* Top bar (Title + Action icons) */
.fb-groups-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-groups-top-title h1 {
  font-size: 26px;
  font-weight: 800;
  color: #050505;
  margin: 0;
  letter-spacing: -0.5px;
}

body.night-mode .fb-groups-top-title h1 {
  color: #e4e6eb;
}

.fb-groups-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-groups-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e4e6eb;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.fb-groups-action-btn:hover {
  background: #d8dadf;
  transform: scale(1.04);
  color: #050505;
  text-decoration: none;
}

body.night-mode .fb-groups-action-btn {
  background: #3a3b3c;
  color: #e4e6eb;
}

body.night-mode .fb-groups-action-btn:hover {
  background: #4e4f50;
  color: #ffffff;
}

/* Search bar */
.fb-groups-search-bar {
  margin-bottom: 14px;
}

.fb-groups-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.fb-groups-search-icon {
  position: absolute;
  inset-inline-start: 14px;
  color: #65676b;
  font-size: 15px;
  pointer-events: none;
}

body.night-mode .fb-groups-search-icon {
  color: #b0b3b8;
}

.fb-groups-search-input {
  background: #f0f2f5 !important;
  border: none !important;
  border-radius: 20px !important;
  padding-block: 8px !important;
  padding-inline-start: 40px !important;
  padding-inline-end: 14px !important;
  font-size: 15px !important;
  color: #050505 !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

body.night-mode .fb-groups-search-input {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-groups-search-input:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px #1877f2 !important;
}

body.night-mode .fb-groups-search-input:focus {
  background: #242526 !important;
  box-shadow: 0 0 0 2px #2d88ff !important;
}

/* Filter pills bar */
.fb-groups-pills-bar {
  margin-bottom: 18px;
  overflow: hidden;
}

.fb-groups-pills-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.fb-groups-pills-inner::-webkit-scrollbar {
  display: none;
}

.fb-groups-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: #e4e6eb;
  color: #050505;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.fb-groups-pill:hover {
  background: #d8dadf;
  color: #050505;
  text-decoration: none;
}

.fb-groups-pill.active {
  background: #e7f3ff;
  color: #1877f2;
}

body.night-mode .fb-groups-pill {
  background: #3a3b3c;
  color: #e4e6eb;
}

body.night-mode .fb-groups-pill:hover {
  background: #4e4f50;
  color: #ffffff;
}

body.night-mode .fb-groups-pill.active {
  background: #263951;
  color: #2d88ff;
}

/* Section styling */
.fb-groups-section {
  margin-bottom: 24px;
}

.fb-groups-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-groups-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #050505;
  margin: 0;
}

body.night-mode .fb-groups-section-title {
  color: #e4e6eb;
}

.fb-groups-section-subtitle {
  font-size: 13.5px;
  color: #65676b;
  margin-top: 3px;
}

body.night-mode .fb-groups-section-subtitle {
  color: #b0b3b8;
}

.fb-groups-see-all {
  font-size: 14.5px;
  font-weight: 600;
  color: #1877f2;
  text-decoration: none;
}

body.night-mode .fb-groups-see-all {
  color: #4599ff;
}

.fb-groups-see-all:hover {
  text-decoration: underline;
}

/* Section 1: Your Groups Compact List (Screenshot 1 (4).jpg) */
.fb-groups-list-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-group-compact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.fb-group-compact-item:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

body.night-mode .fb-group-compact-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fb-group-compact-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.fb-group-compact-info {
  flex: 1;
  min-width: 0;
}

.fb-group-compact-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #050505;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

body.night-mode .fb-group-compact-name {
  color: #e4e6eb;
}

.fb-group-compact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 13px;
  color: #65676b;
  flex-wrap: wrap;
}

body.night-mode .fb-group-compact-meta {
  color: #b0b3b8;
}

.fb-group-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fb-group-meta-tag i {
  font-size: 11px;
}

.fb-group-meta-stat {
  color: inherit;
}

.fb-group-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1877f2;
  display: inline-block;
  margin-inline-start: 4px;
}

body.night-mode .fb-group-unread-dot {
  background: #2d88ff;
}

/* Section 2: Jump Back In (Screenshot 1 (4).jpg) */
.fb-jump-back-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.fb-jump-pill {
  padding: 6px 14px;
  border-radius: 18px;
  border: none;
  background: #e4e6eb;
  color: #050505;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.fb-jump-pill.active {
  background: #1877f2;
  color: #ffffff;
}

body.night-mode .fb-jump-pill {
  background: #3a3b3c;
  color: #e4e6eb;
}

body.night-mode .fb-jump-pill.active {
  background: #2d88ff;
  color: #ffffff;
}

.fb-jump-back-tray {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
}

.fb-jump-back-tray::-webkit-scrollbar {
  display: none;
}

.fb-jump-card {
  flex: 0 0 220px;
  width: 220px;
  max-width: 65vw;
  background: #ffffff;
  border-radius: 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

body.night-mode .fb-jump-card {
  background: #242526;
  border-color: rgba(255, 255, 255, 0.06);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.fb-jump-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.fb-jump-card-header {
  padding: 10px 12px 6px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-jump-card-avatar {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  object-fit: cover;
}

.fb-jump-card-group-name {
  font-size: 13.5px;
  font-weight: 700;
  color: #050505;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.night-mode .fb-jump-card-group-name {
  color: #e4e6eb;
}

.fb-jump-card-body {
  padding: 4px 12px 8px 12px;
  flex: 1;
  text-decoration: none;
  display: flex;
  flex-direction: column;
}

.fb-jump-card-text {
  font-size: 13px;
  color: #050505;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 8px;
}

body.night-mode .fb-jump-card-text {
  color: #e4e6eb;
}

.fb-jump-card-image {
  width: 100%;
  height: 90px;
  border-radius: 8px;
  background-size: cover;
  background-position: center;
  margin-bottom: 8px;
}

.fb-jump-card-badge {
  margin-top: auto;
  font-size: 12px;
  color: #1877f2;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 5px;
}

body.night-mode .fb-jump-card-badge {
  color: #4599ff;
}

.fb-jump-card-footer {
  padding: 8px 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12.5px;
  color: #65676b;
}

body.night-mode .fb-jump-card-footer {
  border-top-color: rgba(255, 255, 255, 0.06);
  color: #b0b3b8;
}

.fb-jump-reactions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.fb-reaction-icons {
  font-size: 12px;
  letter-spacing: -2px;
  margin-inline-end: 3px;
}

.fb-jump-comments {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Section 3: Suggested / Discover Group Cards */
.fb-group-card.ui-box {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  padding: 0 0 14px 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.night-mode .fb-group-card.ui-box {
  background: #242526 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.fb-group-card.ui-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.fb-group-card-cover {
  height: 90px;
  background: linear-gradient(135deg, #1877f2 0%, #0d47a1 100%);
  background-size: cover;
  background-position: center;
}

.fb-group-card-avatar {
  margin-top: -36px !important;
  margin-inline-start: 16px !important;
  margin-bottom: 8px !important;
}

.fb-group-card-avatar img {
  width: 64px !important;
  height: 64px !important;
  border-radius: 12px !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
  object-fit: cover !important;
}

body.night-mode .fb-group-card-avatar img {
  border-color: #242526 !important;
}

.fb-group-card-details {
  padding: 0 16px !important;
  flex: 1 !important;
}

.fb-group-card-title {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
  margin-bottom: 4px !important;
}

body.night-mode .fb-group-card-title {
  color: #e4e6eb !important;
}

.fb-group-card-meta {
  font-size: 13px !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
}

body.night-mode .fb-group-card-meta {
  color: #b0b3b8 !important;
}

.fb-group-card-action {
  padding: 0 16px !important;
}

.fb-btn-join {
  background-color: #e7f3ff !important;
  color: #1877f2 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
  transition: all 0.15s ease !important;
}

.fb-btn-join:hover {
  background-color: #dbeaff !important;
  color: #1877f2 !important;
}

body.night-mode .fb-btn-join {
  background-color: #263951 !important;
  color: #2d88ff !important;
}

body.night-mode .fb-btn-join:hover {
  background-color: #2f4563 !important;
  color: #3e95ff !important;
}

.fb-btn-joined {
  background-color: #e4e6eb !important;
  color: #050505 !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  padding: 8px 14px !important;
}

body.night-mode .fb-btn-joined {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* Mobile Adjustments for Groups */
@media (max-width: 767.98px) {
  .fb-groups-page .fb-groups-container {
    padding: 8px 12px 60px 12px !important;
  }

  .fb-groups-top-title h1 {
    font-size: 24px !important;
  }

  .fb-group-compact-item {
    padding: 6px 4px !important;
  }

  .fb-jump-card {
    flex: 0 0 200px !important;
    width: 200px !important;
  }
}

/* ==========================================================================
   Facebook Pages Page Redesign (Mobile & Desktop)
   ========================================================================== */

/* Overall Page container */
.fb-pages-page .fb-pages-container {
  max-width: 1060px;
  margin: 0 auto;
  padding: 12px 16px 40px 16px;
}

/* Top bar (Title + Action icons) */
.fb-pages-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-pages-top-title h1 {
  font-size: 26px;
  font-weight: 800;
  color: #050505;
  margin: 0;
  letter-spacing: -0.5px;
}

body.night-mode .fb-pages-top-title h1 {
  color: #e4e6eb;
}

.fb-pages-top-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fb-pages-action-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e4e6eb;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #050505;
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.fb-pages-action-btn:hover {
  background: #d8dadf;
  transform: scale(1.04);
  color: #050505;
  text-decoration: none;
}

body.night-mode .fb-pages-action-btn {
  background: #3a3b3c;
  color: #e4e6eb;
}

body.night-mode .fb-pages-action-btn:hover {
  background: #4e4f50;
  color: #ffffff;
}

/* Search bar */
.fb-pages-search-bar {
  margin-bottom: 14px;
}

.fb-pages-search-inner {
  position: relative;
  display: flex;
  align-items: center;
}

.fb-pages-search-icon {
  position: absolute;
  inset-inline-start: 14px;
  color: #65676b;
  font-size: 15px;
  pointer-events: none;
}

body.night-mode .fb-pages-search-icon {
  color: #b0b3b8;
}

.fb-pages-search-input {
  background: #f0f2f5 !important;
  border: none !important;
  border-radius: 20px !important;
  padding-block: 8px !important;
  padding-inline-start: 40px !important;
  padding-inline-end: 14px !important;
  font-size: 15px !important;
  color: #050505 !important;
  box-shadow: none !important;
  transition: background 0.2s ease !important;
}

body.night-mode .fb-pages-search-input {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-pages-search-input:focus {
  background: #ffffff !important;
  box-shadow: 0 0 0 2px #1877f2 !important;
}

body.night-mode .fb-pages-search-input:focus {
  background: #242526 !important;
  box-shadow: 0 0 0 2px #2d88ff !important;
}

/* Filter pills bar */
.fb-pages-pills-bar {
  margin-bottom: 18px;
  overflow: hidden;
}

.fb-pages-pills-inner {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.fb-pages-pills-inner::-webkit-scrollbar {
  display: none;
}

.fb-pages-pill {
  flex-shrink: 0;
  padding: 8px 16px;
  border-radius: 20px;
  background: #e4e6eb;
  color: #050505;
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
  user-select: none;
}

.fb-pages-pill:hover {
  background: #d8dadf;
  color: #050505;
  text-decoration: none;
}

.fb-pages-pill.active {
  background: #e7f3ff;
  color: #1877f2;
}

body.night-mode .fb-pages-pill {
  background: #3a3b3c;
  color: #e4e6eb;
}

body.night-mode .fb-pages-pill:hover {
  background: #4e4f50;
  color: #ffffff;
}

body.night-mode .fb-pages-pill.active {
  background: #263951;
  color: #2d88ff;
}

/* Section styling */
.fb-pages-section {
  margin-bottom: 24px;
}

.fb-pages-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.fb-pages-section-title {
  font-size: 18px;
  font-weight: 700;
  color: #050505;
  margin: 0;
}

body.night-mode .fb-pages-section-title {
  color: #e4e6eb;
}

.fb-pages-section-subtitle {
  font-size: 13.5px;
  color: #65676b;
  margin-top: 3px;
}

body.night-mode .fb-pages-section-subtitle {
  color: #b0b3b8;
}

.fb-pages-see-all {
  font-size: 14.5px;
  font-weight: 600;
  color: #1877f2;
  text-decoration: none;
}

body.night-mode .fb-pages-see-all {
  color: #4599ff;
}

.fb-pages-see-all:hover {
  text-decoration: underline;
}

/* Section 1: Your Pages Compact List */
.fb-pages-list-compact {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.fb-page-compact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s ease;
}

.fb-page-compact-item:hover {
  background: rgba(0, 0, 0, 0.04);
  text-decoration: none;
}

body.night-mode .fb-page-compact-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.fb-page-compact-avatar img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

.fb-page-compact-info {
  flex: 1;
  min-width: 0;
}

.fb-page-compact-name {
  font-size: 15.5px;
  font-weight: 700;
  color: #050505;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 4px;
}

body.night-mode .fb-page-compact-name {
  color: #e4e6eb;
}

.fb-page-compact-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
  font-size: 13px;
  color: #65676b;
  flex-wrap: wrap;
}

body.night-mode .fb-page-compact-meta {
  color: #b0b3b8;
}

.fb-page-meta-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fb-page-meta-tag i {
  font-size: 11px;
}

.fb-page-meta-stat {
  color: inherit;
}

.fb-page-unread-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1877f2;
  display: inline-block;
  margin-inline-start: 4px;
}

body.night-mode .fb-page-unread-dot {
  background: #2d88ff;
}

/* Section 3: Suggested / Discover Page & Group Cards */
.fb-page-card.ui-box,
.fb-group-card.ui-box {
  background: #ffffff !important;
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  padding: 0 0 14px 0 !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

body.night-mode .fb-page-card.ui-box,
body.night-mode .fb-group-card.ui-box {
  background: #242526 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}

.fb-page-card.ui-box:hover,
.fb-group-card.ui-box:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12) !important;
}

.fb-page-card-cover,
.fb-group-card-cover {
  width: 100% !important;
  height: 96px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-color: #1877f2 !important;
  background-image: linear-gradient(135deg, #1877f2 0%, #00c6ff 100%);
  display: block !important;
}

.fb-jump-card-cover-default {
  background: linear-gradient(135deg, #1877f2 0%, #00c6ff 100%) !important;
  width: 100% !important;
  height: 100% !important;
}

.fb-page-card-avatar,
.fb-group-card-avatar {
  position: relative !important;
  z-index: 2 !important;
  width: 72px !important;
  height: 72px !important;
  margin: -36px auto 8px auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  float: none !important;
}

.fb-page-card-avatar a,
.fb-group-card-avatar a {
  display: block !important;
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

.fb-page-card-avatar img,
.fb-group-card-avatar img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
  object-fit: cover !important;
  display: block !important;
  background: #ffffff !important;
}

body.night-mode .fb-page-card-avatar img,
body.night-mode .fb-group-card-avatar img {
  border-color: #242526 !important;
  background: #242526 !important;
}

.fb-page-card-details,
.fb-group-card-details {
  padding: 0 14px 10px 14px !important;
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
}

.fb-page-card-title,
.fb-group-card-title {
  font-size: 15.5px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
  margin-bottom: 4px !important;
  text-align: center !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  line-height: 1.3 !important;
}

body.night-mode .fb-page-card-title,
body.night-mode .fb-group-card-title {
  color: #e4e6eb !important;
}

.fb-page-card-meta,
.fb-group-card-meta {
  font-size: 13px !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-bottom: 12px !important;
}

body.night-mode .fb-page-card-meta,
body.night-mode .fb-group-card-meta {
  color: #b0b3b8 !important;
}

.fb-page-card-action,
.fb-group-card-action {
  padding: 0 14px 14px 14px !important;
  margin-top: auto !important;
  width: 100% !important;
}

.fb-page-card-action .btn,
.fb-group-card-action .btn {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 8px 14px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
}

.fb-page-card-action .fb-btn-join,
.fb-group-card-action .fb-btn-join {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}

.fb-page-card-action .fb-btn-join:hover,
.fb-group-card-action .fb-btn-join:hover {
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
}

.fb-page-card-action .fb-btn-joined,
.fb-group-card-action .fb-btn-joined {
  background-color: #e4e6eb !important;
  border-color: #e4e6eb !important;
  color: #050505 !important;
}

body.night-mode .fb-page-card-action .fb-btn-joined,
body.night-mode .fb-group-card-action .fb-btn-joined {
  background-color: #3a3b3c !important;
  border-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* Mobile Adjustments for Pages */
@media (max-width: 767.98px) {
  .fb-pages-page .fb-pages-container {
    padding: 8px 12px 60px 12px !important;
  }

  .fb-pages-top-title h1 {
    font-size: 24px !important;
  }

  .fb-page-compact-item {
    padding: 6px 4px !important;
  }
}

/* ==========================================================================
   Mobile Facebook Menu (Faithful to Screenshot 1 (2).jpg)
   ========================================================================== */
.fb-mob-menu-container,
.fb-mob-menu-container div:not([class*="fa"]),
.fb-mob-menu-container span:not([class*="fa"]),
.fb-mob-menu-container a:not([class*="fa"]),
.fb-mob-menu-container button:not([class*="fa"]),
.fb-mob-menu-title,
.fb-mob-profile-name,
.fb-mob-section-title,
.fb-mob-shortcut-name,
.fb-mob-tile-title,
.fb-mob-tile-meta,
.fb-mob-see-more-btn,
.fb-mob-footer-label,
.fb-mob-footer-status {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans Arabic", sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fb-mob-menu-container i,
.fb-mob-menu-container [class*="fa-"],
.fb-mob-menu-container .fa,
.fb-mob-menu-container .fas,
.fb-mob-menu-container .far,
.fb-mob-menu-container .fab {
  font-family: var(--_fa-family, "Font Awesome 6 Free", "Font Awesome 6 Pro", "Font Awesome 5 Free", "FontAwesome") !important;
}

.fb-mob-menu-container {
  display: flex !important;
  flex-direction: column !important;
  height: calc(100vh - 56px) !important;
  height: calc(100dvh - 56px) !important;
  background: var(--mob-surface, #f0f2f5) !important;
  color: var(--mob-ink, #050505) !important;
  overflow: hidden !important;
}

body.night-mode .fb-mob-menu-container {
  background: #18191a !important;
  color: #e4e6eb !important;
}

/* 1. Header: Menu Title + Settings & Search */
.fb-mob-menu-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 10px 16px 8px 16px !important;
  flex-shrink: 0 !important;
  background: var(--mob-surface, #f0f2f5) !important;
}

body.night-mode .fb-mob-menu-head {
  background: #18191a !important;
}

.fb-mob-menu-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  letter-spacing: -0.3px !important;
  line-height: 1.2 !important;
  color: #050505 !important;
  margin: 0 !important;
}

body.night-mode .fb-mob-menu-title {
  color: #e4e6eb !important;
}

.fb-mob-menu-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fb-mob-head-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  font-size: 15px !important;
  border: none !important;
  transition: transform 0.1s ease !important;
}

.fb-mob-head-circle-btn:active {
  transform: scale(0.92) !important;
}

body.night-mode .fb-mob-head-circle-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

/* Scrollable Container */
.fb-mob-menu-scrollable {
  flex: 1 1 auto !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 6px 14px 60px 14px !important;
}

/* 2. Profile Card */
.fb-mob-profile-card {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 10px 14px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  margin-bottom: 14px !important;
}

body.night-mode .fb-mob-profile-card {
  background: #242526 !important;
  border-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}

.fb-mob-profile-main {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  text-decoration: none !important;
  color: #050505 !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.fb-mob-profile-main:hover,
.fb-mob-profile-main:focus {
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-mob-profile-main,
body.night-mode .fb-mob-profile-main:hover,
body.night-mode .fb-mob-profile-main:focus {
  color: #e4e6eb !important;
}

.fb-mob-profile-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fb-mob-profile-name {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  letter-spacing: -0.1px !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-mob-profile-name {
  color: #e4e6eb !important;
}

.fb-mob-profile-actions {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}

.fb-mob-profile-action-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  position: relative !important;
  cursor: pointer !important;
}

body.night-mode .fb-mob-profile-action-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-mob-profile-action-btn:active {
  transform: scale(0.92) !important;
}

.fb-mob-profile-badge {
  position: absolute !important;
  top: -4px !important;
  right: -4px !important;
  background: #e41e3f !important;
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  padding: 1px 5px !important;
  border-radius: 10px !important;
  border: 2px solid #ffffff !important;
  line-height: 1.2 !important;
}

body.night-mode .fb-mob-profile-badge {
  border-color: #242526 !important;
}

/* 3. Your Shortcuts */
.fb-mob-shortcuts-section {
  margin-bottom: 16px !important;
}

.fb-mob-section-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #65676b !important;
  margin-bottom: 10px !important;
  padding-left: 2px !important;
  text-align: start !important;
}

body.night-mode .fb-mob-section-title {
  color: #b0b3b8 !important;
}

.fb-mob-shortcuts-tray {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  padding-bottom: 6px !important;
  scrollbar-width: none !important;
}

.fb-mob-shortcuts-tray::-webkit-scrollbar {
  display: none !important;
}

.fb-mob-shortcut-item {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-decoration: none !important;
  width: 68px !important;
  flex-shrink: 0 !important;
  color: #050505 !important;
}

.fb-mob-shortcut-item:hover,
.fb-mob-shortcut-item:focus {
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-mob-shortcut-item,
body.night-mode .fb-mob-shortcut-item:hover,
body.night-mode .fb-mob-shortcut-item:focus {
  color: #e4e6eb !important;
}

.fb-mob-shortcut-thumb-wrap {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  overflow: visible !important;
  margin-bottom: 6px !important;
}

.fb-mob-shortcut-thumb-wrap img {
  width: 58px !important;
  height: 58px !important;
  border-radius: 14px !important;
  object-fit: cover !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
  display: block !important;
}

.fb-mob-shortcut-tag {
  position: absolute !important;
  bottom: -3px !important;
  right: -3px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
}

body.night-mode .fb-mob-shortcut-tag {
  border-color: #18191a !important;
}

.fb-mob-shortcut-tag.page-tag {
  background: #f05323 !important;
}

.fb-mob-shortcut-tag.group-tag {
  background: #1877f2 !important;
}

.fb-mob-shortcut-name {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #050505 !important;
  text-align: center !important;
  line-height: 1.25 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  word-break: break-word !important;
  margin-top: 4px !important;
  letter-spacing: -0.1px !important;
}

body.night-mode .fb-mob-shortcut-name {
  color: #e4e6eb !important;
}

/* 4. Feature Tiles Grid (2 Columns) */
.fb-mob-tiles-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
  margin-bottom: 10px !important;
}

.fb-mob-tile {
  background: #ffffff !important;
  border-radius: 12px !important;
  padding: 12px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  text-align: start !important;
  min-height: 80px !important;
  text-decoration: none !important;
  color: #050505 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  transition: transform 0.12s ease, background 0.12s ease !important;
}

.fb-mob-tile:hover,
.fb-mob-tile:focus {
  text-decoration: none !important;
  color: #050505 !important;
}

.fb-mob-tile:active {
  transform: scale(0.97) !important;
}

body.night-mode .fb-mob-tile {
  background: #242526 !important;
  color: #e4e6eb !important;
  border-color: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

body.night-mode .fb-mob-tile:hover,
body.night-mode .fb-mob-tile:focus {
  color: #e4e6eb !important;
}

.fb-mob-tile-icon {
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.fb-mob-tile-label {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  text-align: start !important;
  width: 100% !important;
}

.fb-mob-tile-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.15px !important;
}

body.night-mode .fb-mob-tile-title {
  color: #e4e6eb !important;
}

.fb-mob-tile-meta {
  font-size: 12px !important;
  font-weight: 400 !important;
  color: #65676b !important;
  margin-top: 2px !important;
  line-height: 1.2 !important;
}

body.night-mode .fb-mob-tile-meta {
  color: #b0b3b8 !important;
}

/* 5. See More Button */
.fb-mob-see-more-btn {
  width: 100% !important;
  height: 38px !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  margin: 6px 0 14px 0 !important;
  transition: background 0.15s ease !important;
}

body.night-mode .fb-mob-see-more-btn {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-mob-see-more-btn:active {
  background: #d8dadf !important;
}

body.night-mode .fb-mob-see-more-btn:active {
  background: #4e4f50 !important;
}

/* 6. Footer Rows */
.fb-mob-menu-footer-rows {
  border-top: 1px solid rgba(0, 0, 0, 0.08) !important;
  padding-top: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

body.night-mode .fb-mob-menu-footer-rows {
  border-top-color: rgba(255, 255, 255, 0.08) !important;
}

.fb-mob-footer-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 10px 6px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #050505 !important;
  transition: background 0.12s ease !important;
}

.fb-mob-footer-row:hover,
.fb-mob-footer-row:active {
  background: rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-mob-footer-row {
  color: #e4e6eb !important;
}

body.night-mode .fb-mob-footer-row:hover,
body.night-mode .fb-mob-footer-row:active {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e4e6eb !important;
}

.fb-mob-footer-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #e4e6eb !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
}

body.night-mode .fb-mob-footer-icon {
  background: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-mob-footer-icon.icon-logout {
  background: rgba(240, 40, 73, 0.12) !important;
  color: #f02849 !important;
}

.fb-mob-footer-label {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: inherit !important;
  flex: 1 !important;
  line-height: 1.2 !important;
}

.fb-mob-footer-status {
  font-size: 13px !important;
  color: #65676b !important;
  font-weight: 500 !important;
}

body.night-mode .fb-mob-footer-status {
  color: #b0b3b8 !important;
}

.fb-mob-footer-arrow {
  color: #65676b !important;
  font-size: 13px !important;
}

body.night-mode .fb-mob-footer-arrow {
  color: #b0b3b8 !important;
}

html[dir="RTL"] .fb-mob-footer-arrow {
  transform: scaleX(-1) !important;
}

/* Top Tab Bar Profile Picture Icon (5th item) */
.fb-mob-nav-profile-pic {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 50% !important;
}

.fb-mob-nav-profile-pic img {
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 2px solid transparent !important;
}

.fb-mob-nav>a.active .fb-mob-nav-profile-pic img {
  border-color: #1877f2 !important;
}

.fb-mob-nav-burger-dots {
  position: absolute !important;
  bottom: -2px !important;
  right: -2px !important;
  width: 14px !important;
  height: 14px !important;
  border-radius: 50% !important;
  background: #1877f2 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid #ffffff !important;
}

/* ============================================================
   AUTHENTIC FACEBOOK DESKTOP NEWSFEED STYLES (pc feed2 / pc feed3)
   ============================================================ */

/* 1. STORIES CAROUSEL */
.stories-wrapper {
  position: relative !important;
  width: 100% !important;
  max-width: 590px !important;
  margin: 0 auto 16px !important;
}

.stories-wrapper,
#stories,
.stories.carousel,
.stories.sngine.carousel,
.stories.story-preview {
  display: flex !important;
  align-items: stretch !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 2px 0 4px !important;
  width: 100% !important;
}

.stories-wrapper::-webkit-scrollbar,
#stories::-webkit-scrollbar,
.stories.carousel::-webkit-scrollbar,
.stories.sngine.carousel::-webkit-scrollbar,
.stories.story-preview::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

/* Explicit Facebook Create Story Component */
.fb-create-story {
  position: relative !important;
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  display: flex !important;
  flex-direction: column !important;
  user-select: none !important;
}

body.night-mode .fb-create-story {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

.fb-create-story:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.fb-create-story-bg {
  width: 100% !important;
  height: 142px !important;
  flex: 0 0 142px !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
}

.fb-create-story:hover .fb-create-story-bg {
  transform: scale(1.06) !important;
}

.fb-create-story-bottom {
  position: relative !important;
  width: 100% !important;
  height: 56px !important;
  flex: 0 0 56px !important;
  background: #ffffff !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 0 6px 8px !important;
  box-sizing: border-box !important;
}

body.night-mode .fb-create-story-bottom {
  background: #242526 !important;
}

.fb-create-story-btn {
  position: absolute !important;
  top: -18px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: #0866ff !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  border: 4px solid #ffffff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
  z-index: 3 !important;
  transition: transform 0.15s ease !important;
}

body.night-mode .fb-create-story-btn {
  border-color: #242526 !important;
}

.fb-create-story:hover .fb-create-story-btn {
  transform: translateX(-50%) scale(1.08) !important;
}

.fb-create-story-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.15 !important;
  text-align: center !important;
  display: block !important;
  white-space: normal !important;
  word-break: break-word !important;
}

body.night-mode .fb-create-story-label {
  color: #e4e6eb !important;
}

/* Friend Stories (Zuck.js Timeline item) */
#stories .story {
  position: relative !important;
  flex: 0 0 112px !important;
  width: 112px !important;
  height: 198px !important;
  min-height: 198px !important;
  max-height: 198px !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s cubic-bezier(0.2, 0, 0, 1) !important;
  margin: 0 !important;
  background: #000000 !important;
  user-select: none !important;
}

#stories .story:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

#stories .story>.item-link {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  position: relative !important;
}

#stories .story>.item-link>.item-preview {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  border-radius: 10px !important;
}

#stories .story>.item-link>.item-preview img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1) !important;
  border: none !important;
  padding: 0 !important;
  border-radius: 10px !important;
}

#stories .story:hover>.item-link>.item-preview img {
  transform: scale(1.06) !important;
}

#stories .story>.item-link::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 35%, rgba(0, 0, 0, 0.75) 100%) !important;
  border-radius: 10px !important;
  pointer-events: none !important;
}

#stories .story>.item-link>.info {
  position: absolute !important;
  bottom: 8px !important;
  inset-inline: 8px !important;
  z-index: 3 !important;
  display: block !important;
  margin: 0 !important;
}

#stories .story>.item-link>.info .name {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #ffffff !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9) !important;
  line-height: 1.25 !important;
}

#stories .story>.item-link>.info .time {
  display: none !important;
}

/* Stories Navigation Arrow Button */
.stories-nav-btn {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: all 0.2s ease !important;
}

body.night-mode .stories-nav-btn {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

.stories-nav-btn:hover {
  background: #f0f2f5 !important;
  color: #050505 !important;
  transform: translateY(-50%) scale(1.05) !important;
}

body.night-mode .stories-nav-btn:hover {
  background: #4e4f50 !important;
  color: #ffffff !important;
}

.stories-nav-next {
  inset-inline-end: -16px !important;
}

.stories-nav-prev {
  inset-inline-start: -16px !important;
}

/* 2. RIGHT SIDEBAR (Clean Facebook Widget Look) */
.fb-right .card {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  margin-bottom: 4px !important;
  border-radius: 0 !important;
}

.fb-right .card-header {
  background: transparent !important;
  border: none !important;
  padding: 8px 8px 4px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #65676b !important;
}

body.night-mode .fb-right .card-header {
  color: #b0b3b8 !important;
}

.fb-right .card-body {
  padding: 0 !important;
}

.fb-widget-section {
  padding: 4px 0 !important;
}

.fb-widget-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px 4px !important;
}

.fb-widget-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #65676b !important;
}

body.night-mode .fb-widget-title {
  color: #b0b3b8 !important;
}

.fb-right-divider {
  height: 1px !important;
  background: #ced0d4 !important;
  margin: 10px 8px !important;
  opacity: 0.8 !important;
}

body.night-mode .fb-right-divider {
  background: #3e4042 !important;
}

/* Sponsored Section */
.fb-sponsored-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  margin-bottom: 2px !important;
}

.fb-sponsored-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
}

body.night-mode .fb-sponsored-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.fb-sponsored-thumb {
  width: 76px !important;
  height: 76px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
}

.fb-widget-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 4px 8px 6px !important;
}

.fb-widget-more-link {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #0866ff !important;
  text-decoration: none !important;
  transition: text-decoration 0.15s ease !important;
}

.fb-widget-more-link:hover {
  text-decoration: underline !important;
}

body.night-mode .fb-widget-more-link {
  color: #4599ff !important;
}

/* Trending Section Compact */
.fb-trending-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fb-trending-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.fb-trending-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .fb-trending-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.fb-trending-link {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  text-decoration: none !important;
  flex: 1 !important;
}

.fb-trending-tag {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.night-mode .fb-trending-tag {
  color: #e4e6eb !important;
}

.fb-trending-count {
  font-size: 11.5px !important;
  color: #65676b !important;
  font-weight: 400 !important;
}

body.night-mode .fb-trending-count {
  color: #b0b3b8 !important;
}

.fb-trending-btn {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 11px !important;
  flex-shrink: 0 !important;
  margin-inline-start: 8px !important;
  border: 1px solid #ced0d4 !important;
  background: #f0f2f5 !important;
  color: #65676b !important;
  transition: all 0.2s ease !important;
}

.fb-trending-btn:hover {
  background: #e4e6eb !important;
  color: #050505 !important;
}

.fb-trending-btn.following {
  background: #e7f3ff !important;
  color: #0866ff !important;
  border-color: #0866ff !important;
}

body.night-mode .fb-trending-btn {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* Suggested For You Section Compact */
.fb-suggested-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fb-suggested-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 5px 8px !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

.fb-suggested-item:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}

body.night-mode .fb-suggested-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
}

.fb-suggested-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  margin-inline-end: 10px !important;
}

.fb-suggested-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-suggested-info {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.fb-suggested-title {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  text-decoration: none !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
}

body.night-mode .fb-suggested-title {
  color: #e4e6eb !important;
}

.fb-suggested-title .verified-icon {
  font-size: 12px !important;
}

.fb-suggested-meta {
  font-size: 11.5px !important;
  color: #65676b !important;
  font-weight: 400 !important;
}

body.night-mode .fb-suggested-meta {
  color: #b0b3b8 !important;
}

.fb-suggest-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 12px !important;
  border: 1px solid #ced0d4 !important;
  background: #f0f2f5 !important;
  color: #0866ff !important;
  flex-shrink: 0 !important;
  margin-inline-start: 8px !important;
  transition: all 0.2s ease !important;
}

.fb-suggest-btn:hover {
  background: #0866ff !important;
  color: #ffffff !important;
  border-color: #0866ff !important;
}

body.night-mode .fb-suggest-btn {
  background: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #4599ff !important;
}

.fb-sponsored-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-sponsored-info {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  min-width: 0 !important;
}

.fb-sponsored-title {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.35 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
}

body.night-mode .fb-sponsored-title {
  color: #e4e6eb !important;
}

.fb-sponsored-link {
  font-size: 12px !important;
  color: #65676b !important;
  font-weight: 400 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.night-mode .fb-sponsored-link {
  color: #b0b3b8 !important;
}

/* Birthdays Section */
.fb-birthday-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  transition: background 0.15s ease !important;
  color: #050505 !important;
}

.fb-birthday-item:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-birthday-item {
  color: #e4e6eb !important;
}

body.night-mode .fb-birthday-item:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e4e6eb !important;
}

.fb-birthday-icon {
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.fb-birthday-text {
  font-size: 13.5px !important;
  line-height: 1.35 !important;
  color: inherit !important;
}

.fb-birthday-text strong {
  font-weight: 600 !important;
}

/* Contacts Section */
.fb-contacts {
  margin-top: 4px !important;
}

.fb-contacts-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 6px 8px 4px !important;
}

.fb-contacts-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #65676b !important;
}

body.night-mode .fb-contacts-title {
  color: #b0b3b8 !important;
}

.fb-contacts-actions {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
}

.fb-contact-btn {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #65676b !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  transition: background 0.15s ease !important;
  padding: 0 !important;
}

.fb-contact-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  color: #050505 !important;
}

body.night-mode .fb-contact-btn {
  color: #b0b3b8 !important;
}

body.night-mode .fb-contact-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #e4e6eb !important;
}

.fb-contacts-list ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.fb-contact {
  list-style: none !important;
  margin: 0 !important;
}

.fb-contact a {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 6px 8px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #050505 !important;
  transition: background 0.15s ease !important;
}

.fb-contact a:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  text-decoration: none !important;
  color: #050505 !important;
}

body.night-mode .fb-contact a {
  color: #e4e6eb !important;
}

body.night-mode .fb-contact a:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  color: #e4e6eb !important;
}

.fb-contact-avatar {
  position: relative !important;
  width: 36px !important;
  height: 36px !important;
  flex-shrink: 0 !important;
}

.fb-contact-avatar img {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-contact-online-badge {
  position: absolute !important;
  bottom: 0 !important;
  inset-inline-end: 0 !important;
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background-color: #31a24c !important;
  border: 2px solid #ffffff !important;
}

body.night-mode .fb-contact-online-badge {
  border-color: #242526 !important;
}

.fb-contact-name {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: inherit !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* 3. POST CARD DESKTOP REFINEMENTS */
.fb-main .post {
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 16px !important;
}

body.night-mode .fb-main .post {
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

.fb-main .publisher {
  border-radius: 8px !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 16px !important;
}

body.night-mode .fb-main .publisher {
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* ==========================================================================
   Facebook "People You May Know" Desktop Card Redesign (Reference: pc feed4.JPG)
   ========================================================================== */
li.fb-pymk-feed-item {
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

.fb-pymk-card {
  background: #ffffff !important;
  border: 1px solid #ced0d4 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  margin-bottom: 16px !important;
  padding: 12px 16px 10px 16px !important;
  position: relative !important;
  overflow: visible !important;
}

body.night-mode .fb-pymk-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

/* Header */
.fb-pymk-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding: 0 2px !important;
}

.fb-pymk-header-left {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.fb-pymk-header-icon {
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.night-mode .fb-pymk-header-icon {
  color: #e4e6eb !important;
}

.fb-pymk-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-pymk-title {
  color: #e4e6eb !important;
}

.fb-pymk-dots-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: none !important;
  background: transparent !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.fb-pymk-dots-btn:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

body.night-mode .fb-pymk-dots-btn {
  color: #b0b3b8 !important;
}

body.night-mode .fb-pymk-dots-btn:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Carousel wrapper */
.fb-pymk-carousel-wrap {
  position: relative !important;
  width: 100% !important;
}

/* Scroll tray */
.fb-pymk-tray {
  display: flex !important;
  gap: 8px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
  padding: 2px 2px 8px 2px !important;
}

.fb-pymk-tray::-webkit-scrollbar {
  display: none !important;
}

/* Navigation arrows */
.fb-pymk-nav-btn {
  position: absolute !important;
  top: 38% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 2px rgba(0, 0, 0, 0.1) !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 10 !important;
  transition: background-color 0.15s, transform 0.15s !important;
}

.fb-pymk-nav-btn:hover {
  background-color: #f2f2f2 !important;
  transform: translateY(-50%) scale(1.04) !important;
}

.fb-pymk-nav-next {
  right: -14px !important;
}

.fb-pymk-nav-prev {
  left: -14px !important;
  display: none !important;
}

body[dir="rtl"] .fb-pymk-nav-next {
  right: auto !important;
  left: -14px !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

body[dir="rtl"] .fb-pymk-nav-prev {
  left: auto !important;
  right: -14px !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

body.night-mode .fb-pymk-nav-btn {
  background: #3e4042 !important;
  color: #e4e6eb !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.night-mode .fb-pymk-nav-btn:hover {
  background: #4e4f50 !important;
}

/* Suggested Card Item */
.fb-pymk-card-item {
  flex: 0 0 196px !important;
  width: 196px !important;
  min-width: 196px !important;
  max-width: 196px !important;
  background: #ffffff !important;
  border: 1px solid #ced0d4 !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  position: relative !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}

body.night-mode .fb-pymk-card-item {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

/* Image wrapper */
.fb-pymk-img-wrap {
  position: relative !important;
  width: 100% !important;
  height: 196px !important;
  overflow: hidden !important;
  background-color: #e4e6eb !important;
}

body.night-mode .fb-pymk-img-wrap {
  background-color: #242526 !important;
}

.fb-pymk-img-wrap a {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
}

.fb-pymk-img-wrap img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}

.fb-pymk-card-item:hover .fb-pymk-img-wrap img {
  transform: scale(1.02);
}

/* Dismiss (X) button */
.fb-pymk-dismiss {
  position: absolute !important;
  top: 8px !important;
  right: 8px !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
  padding: 0 !important;
  line-height: 1 !important;
}

body[dir="rtl"] .fb-pymk-dismiss {
  right: auto !important;
  left: 8px !important;
}

.fb-pymk-dismiss:hover {
  background: rgba(0, 0, 0, 0.82) !important;
  transform: scale(1.08) !important;
}

/* Card Body */
.fb-pymk-body {
  padding: 10px 12px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
  min-height: 124px !important;
}

.fb-pymk-name {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  line-height: 1.25 !important;
  margin-bottom: 4px !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
  word-break: break-word !important;
}

.fb-pymk-name:hover {
  text-decoration: underline !important;
  color: #050505 !important;
}

body.night-mode .fb-pymk-name {
  color: #e4e6eb !important;
}

body.night-mode .fb-pymk-name:hover {
  color: #e4e6eb !important;
}

/* Mutual friends line */
.fb-pymk-mutual {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  color: #65676b !important;
  margin-bottom: 12px !important;
  min-height: 20px !important;
  line-height: 1.2 !important;
}

body.night-mode .fb-pymk-mutual {
  color: #b0b3b8 !important;
}

.fb-pymk-mutual-avatars {
  display: flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}

.fb-pymk-mini-avatar {
  width: 16px !important;
  height: 16px !important;
  border-radius: 50% !important;
  background-color: #ced0d4 !important;
  background-size: cover !important;
  background-position: center !important;
  display: inline-block !important;
  border: 1px solid #ffffff !important;
}

body.night-mode .fb-pymk-mini-avatar {
  border-color: #242526 !important;
}

.fb-pymk-mini-avatar-overlap {
  margin-left: -5px !important;
}

body[dir="rtl"] .fb-pymk-mini-avatar-overlap {
  margin-left: 0 !important;
  margin-right: -5px !important;
}

/* Add Friend Button */
.fb-pymk-add-btn {
  width: 100% !important;
  height: 36px !important;
  border-radius: 6px !important;
  background-color: #e7f3ff !important;
  color: #0866ff !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background-color 0.15s ease !important;
  padding: 0 8px !important;
}

.fb-pymk-add-btn:hover {
  background-color: #d8ebff !important;
  color: #0866ff !important;
}

.fb-pymk-add-btn svg {
  flex-shrink: 0 !important;
}

body.night-mode .fb-pymk-add-btn {
  background-color: rgba(45, 136, 255, 0.2) !important;
  color: #2d88ff !important;
}

body.night-mode .fb-pymk-add-btn:hover {
  background-color: rgba(45, 136, 255, 0.3) !important;
  color: #2d88ff !important;
}

/* Footer / See all */
.fb-pymk-footer {
  text-align: center !important;
  padding-top: 10px !important;
  margin-top: 4px !important;
  border-top: 1px solid #f0f2f5 !important;
}

body.night-mode .fb-pymk-footer {
  border-top-color: #3e4042 !important;
}

.fb-pymk-see-all {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #0866ff !important;
  text-decoration: none !important;
  display: inline-block !important;
  padding: 6px 12px !important;
  border-radius: 6px !important;
  transition: background-color 0.15s ease !important;
}

.fb-pymk-see-all:hover {
  text-decoration: underline !important;
  background-color: rgba(8, 102, 255, 0.06) !important;
  color: #0866ff !important;
}

body.night-mode .fb-pymk-see-all {
  color: #2d88ff !important;
}

body.night-mode .fb-pymk-see-all:hover {
  background-color: rgba(45, 136, 255, 0.12) !important;
  color: #2d88ff !important;
}

/* ==========================================================================
   Facebook Gaming Desktop Redesign (Reference: game.JPG & game2.JPG)
   ========================================================================== */
.fb-gaming-page {
  display: flex !important;
  min-height: calc(100vh - 56px) !important;
  background-color: #f0f2f5 !important;
}

body.night-mode .fb-gaming-page {
  background-color: #18191a !important;
}

/* Sidebar */
.fb-gaming-sidebar {
  width: 360px !important;
  min-width: 360px !important;
  max-width: 360px !important;
  background-color: #ffffff !important;
  border-right: 1px solid #ced0d4 !important;
  height: calc(100vh - 56px) !important;
  position: sticky !important;
  top: 56px !important;
  overflow-y: auto !important;
  z-index: 10 !important;
  scrollbar-width: thin !important;
}

body[dir="rtl"] .fb-gaming-sidebar {
  border-right: none !important;
  border-left: 1px solid #ced0d4 !important;
}

body.night-mode .fb-gaming-sidebar {
  background-color: #242526 !important;
  border-right-color: #3e4042 !important;
}

body[dir="rtl"].night-mode .fb-gaming-sidebar {
  border-left-color: #3e4042 !important;
}

.fb-gaming-sidebar-inner {
  padding: 16px 12px 30px 16px !important;
}

body[dir="rtl"] .fb-gaming-sidebar-inner {
  padding: 16px 16px 30px 12px !important;
}

.fb-gaming-sidebar-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}

.fb-gaming-sidebar-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 !important;
  line-height: 1.2 !important;
}

body.night-mode .fb-gaming-sidebar-title {
  color: #e4e6eb !important;
}

.fb-gaming-circle-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #e4e6eb !important;
  border: none !important;
  color: #050505 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  font-size: 15px !important;
  transition: background-color 0.15s ease !important;
}

.fb-gaming-circle-btn:hover {
  background-color: #d8dadf !important;
}

body.night-mode .fb-gaming-circle-btn {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-gaming-circle-btn:hover {
  background-color: #4e4f50 !important;
}

/* Search Input */
.fb-gaming-search-box {
  position: relative !important;
  margin-bottom: 12px !important;
  padding: 0 4px !important;
}

.fb-gaming-search-icon {
  position: absolute !important;
  left: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: #65676b !important;
  font-size: 14px !important;
  pointer-events: none !important;
}

body[dir="rtl"] .fb-gaming-search-icon {
  left: auto !important;
  right: 18px !important;
}

.fb-gaming-search-input {
  width: 100% !important;
  height: 38px !important;
  border-radius: 50px !important;
  background-color: #f0f2f5 !important;
  border: none !important;
  padding-left: 38px !important;
  padding-right: 16px !important;
  font-size: 15px !important;
  color: #050505 !important;
  outline: none !important;
  transition: background-color 0.15s ease !important;
}

body[dir="rtl"] .fb-gaming-search-input {
  padding-left: 16px !important;
  padding-right: 38px !important;
}

.fb-gaming-search-input:focus {
  background-color: #ffffff !important;
  box-shadow: 0 0 0 2px #1877f2 !important;
}

body.night-mode .fb-gaming-search-input {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-gaming-search-icon {
  color: #b0b3b8 !important;
}

body.night-mode .fb-gaming-search-input:focus {
  background-color: #242526 !important;
}

/* Nav Menu */
.fb-gaming-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
}

.fb-gaming-nav-item {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 8px 10px !important;
  border-radius: 8px !important;
  color: #050505 !important;
  text-decoration: none !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  transition: background-color 0.15s ease !important;
}

.fb-gaming-nav-item:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .fb-gaming-nav-item {
  color: #e4e6eb !important;
}

body.night-mode .fb-gaming-nav-item:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: #e4e6eb !important;
}

.fb-gaming-nav-item.active {
  background-color: #e7f3ff !important;
  color: #1877f2 !important;
  font-weight: 600 !important;
}

body.night-mode .fb-gaming-nav-item.active {
  background-color: rgba(45, 136, 255, 0.2) !important;
  color: #2d88ff !important;
}

.fb-gaming-nav-icon {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #e4e6eb !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 17px !important;
  color: #050505 !important;
  flex-shrink: 0 !important;
}

body.night-mode .fb-gaming-nav-icon {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

.fb-gaming-nav-item.active .fb-gaming-nav-icon,
.fb-gaming-icon-blue {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

body.night-mode .fb-gaming-nav-item.active .fb-gaming-nav-icon,
body.night-mode .fb-gaming-icon-blue {
  background-color: #2d88ff !important;
  color: #ffffff !important;
}

.fb-gaming-nav-label {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.fb-gaming-divider {
  height: 1px !important;
  background-color: #ced0d4 !important;
  margin: 12px 6px !important;
}

body.night-mode .fb-gaming-divider {
  background-color: #3e4042 !important;
}

.fb-gaming-section-box {
  padding: 4px 4px 6px 4px !important;
}

.fb-gaming-section-header-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
}

.fb-gaming-sub-title {
  font-size: 17px !important;
  font-weight: 600 !important;
  color: #050505 !important;
}

body.night-mode .fb-gaming-sub-title {
  color: #e4e6eb !important;
}

.fb-gaming-see-all-link {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #1877f2 !important;
  text-decoration: none !important;
}

.fb-gaming-see-all-link:hover {
  text-decoration: underline !important;
}

body.night-mode .fb-gaming-see-all-link {
  color: #2d88ff !important;
}

.fb-gaming-sub-desc {
  font-size: 13px !important;
  color: #65676b !important;
  margin-bottom: 8px !important;
  line-height: 1.35 !important;
}

body.night-mode .fb-gaming-sub-desc {
  color: #b0b3b8 !important;
}

/* Main Content Area */
.fb-gaming-main {
  flex: 1 !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}

.fb-gaming-container {
  max-width: 1280px !important;
  margin: 0 auto !important;
  padding: 24px 32px 60px 32px !important;
}

.fb-gaming-section {
  margin-bottom: 32px !important;
}

.fb-gaming-heading {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 0 14px 0 !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-gaming-heading {
  color: #e4e6eb !important;
}

/* Section 1: Recently Played */
.fb-gaming-recent-tray {
  display: flex !important;
  gap: 14px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  padding-bottom: 6px !important;
}

.fb-gaming-recent-tray::-webkit-scrollbar {
  display: none !important;
}

.fb-gaming-recent-card {
  flex: 0 0 160px !important;
  width: 160px !important;
  height: 160px !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: block !important;
}

.fb-gaming-recent-card:hover {
  transform: scale(1.03) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

.fb-gaming-recent-img {
  width: 100% !important;
  height: 100% !important;
  position: relative !important;
  background-color: #242526 !important;
}

.fb-gaming-recent-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-gaming-recent-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 24px 10px 8px 10px !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.fb-gaming-badge-star {
  color: #f7b125 !important;
  margin-left: 4px !important;
  font-size: 13px !important;
}

/* Section 2: Featured Games Carousel */
.fb-gaming-featured-wrapper {
  position: relative !important;
  width: 100% !important;
}

.fb-gaming-featured-tray {
  display: flex !important;
  gap: 16px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding: 4px 2px 10px 2px !important;
}

.fb-gaming-featured-tray::-webkit-scrollbar {
  display: none !important;
}

.fb-gaming-featured-card {
  flex: 0 0 350px !important;
  width: 350px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
  border: 1px solid #ced0d4 !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
}

body.night-mode .fb-gaming-featured-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.fb-gaming-featured-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16) !important;
}

.fb-gaming-featured-media {
  position: relative !important;
  width: 100% !important;
  height: 195px !important;
  background-color: #000000 !important;
  overflow: hidden !important;
}

.fb-gaming-featured-media img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-gaming-badge-live {
  position: absolute !important;
  top: 10px !important;
  left: 10px !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  border-radius: 4px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 3px 8px !important;
  backdrop-filter: blur(4px) !important;
}

body[dir="rtl"] .fb-gaming-badge-live {
  left: auto !important;
  right: 10px !important;
}

.fb-gaming-sound-btn,
.fb-gaming-play-badge {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.6) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
}

body[dir="rtl"] .fb-gaming-sound-btn,
body[dir="rtl"] .fb-gaming-play-badge {
  right: auto !important;
  left: 10px !important;
}

.fb-gaming-featured-body {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  background: inherit !important;
}

.fb-gaming-featured-icon {
  width: 44px !important;
  height: 44px !important;
  border-radius: 10px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

.fb-gaming-featured-info {
  flex: 1 !important;
  min-width: 0 !important;
}

.fb-gaming-featured-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-gaming-featured-title {
  color: #e4e6eb !important;
}

.fb-gaming-featured-desc {
  font-size: 13px !important;
  color: #65676b !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-top: 2px !important;
}

body.night-mode .fb-gaming-featured-desc {
  color: #b0b3b8 !important;
}

.fb-gaming-featured-stats {
  font-size: 12px !important;
  color: #8a8d91 !important;
  margin-top: 2px !important;
}

/* Nav Floating Arrow */
.fb-gaming-nav-arrow {
  position: absolute !important;
  top: 44% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 5 !important;
  color: #050505 !important;
  transition: background-color 0.15s ease, transform 0.15s ease !important;
}

.fb-gaming-nav-arrow:hover {
  background-color: #f2f2f2 !important;
  transform: translateY(-50%) scale(1.04) !important;
}

.fb-gaming-nav-arrow-right {
  right: -16px !important;
}

body[dir="rtl"] .fb-gaming-nav-arrow-right {
  right: auto !important;
  left: -16px !important;
  transform: translateY(-50%) rotate(180deg) !important;
}

body.night-mode .fb-gaming-nav-arrow {
  background: #3e4042 !important;
  color: #e4e6eb !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

body.night-mode .fb-gaming-nav-arrow:hover {
  background: #4e4f50 !important;
}

/* Section 3: Picks Tray (Matching game2.JPG) */
.fb-gaming-picks-wrapper {
  position: relative !important;
  width: 100% !important;
}

.fb-gaming-picks-tray {
  display: flex !important;
  gap: 12px !important;
  overflow-x: auto !important;
  scroll-behavior: smooth !important;
  scrollbar-width: none !important;
  padding: 4px 2px 10px 2px !important;
}

.fb-gaming-picks-tray::-webkit-scrollbar {
  display: none !important;
}

.fb-gaming-pick-card,
.fb-gaming-card {
  flex: 0 0 176px !important;
  width: 176px !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid #ced0d4 !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
}

body.night-mode .fb-gaming-pick-card,
body.night-mode .fb-gaming-card {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.fb-gaming-pick-card:hover,
.fb-gaming-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12) !important;
}

.fb-gaming-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

.fb-gaming-pick-img,
.fb-gaming-card-img {
  width: 100% !important;
  height: 165px !important;
  overflow: hidden !important;
  background-color: #e4e6eb !important;
}

body.night-mode .fb-gaming-pick-img,
body.night-mode .fb-gaming-card-img {
  background-color: #3a3b3c !important;
}

.fb-gaming-pick-img img,
.fb-gaming-card-img img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transition: transform 0.2s ease !important;
}

.fb-gaming-pick-card:hover .fb-gaming-pick-img img,
.fb-gaming-card:hover .fb-gaming-card-img img {
  transform: scale(1.03) !important;
}

.fb-gaming-pick-body,
.fb-gaming-card-info {
  padding: 10px 12px 12px 12px !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 !important;
  justify-content: space-between !important;
}

.fb-gaming-pick-title,
.fb-gaming-card-title {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #050505 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin-bottom: 6px !important;
}

body.night-mode .fb-gaming-pick-title,
body.night-mode .fb-gaming-card-title {
  color: #e4e6eb !important;
}

.fb-gaming-pick-meta,
.fb-gaming-card-meta {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.fb-gaming-cat-pill {
  display: inline-block !important;
  background-color: #f0f2f5 !important;
  color: #65676b !important;
  border-radius: 12px !important;
  padding: 3px 10px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.3 !important;
}

body.night-mode .fb-gaming-cat-pill {
  background-color: #3a3b3c !important;
  color: #b0b3b8 !important;
}

.fb-gaming-mini-friend {
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid #ffffff !important;
}

.fb-gaming-played-pill {
  font-size: 11px !important;
  color: #65676b !important;
  display: flex !important;
  align-items: center !important;
}

body.night-mode .fb-gaming-played-pill {
  color: #b0b3b8 !important;
}

/* Section 4: Wide Picks Bottom */
.fb-gaming-wide-pick {
  position: relative !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  height: 120px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: transform 0.2s ease !important;
}

.fb-gaming-wide-pick:hover {
  transform: scale(1.02) !important;
}

.fb-gaming-wide-pick img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.fb-gaming-wide-overlay {
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  padding: 24px 10px 8px 10px !important;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.85)) !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-align: center !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Player View */
.fb-gaming-player-wrapper {
  background: #ffffff !important;
  border-radius: 14px !important;
  border: 1px solid #ced0d4 !important;
  padding: 16px 20px !important;
  margin-bottom: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
}

body.night-mode .fb-gaming-player-wrapper {
  background: #242526 !important;
  border-color: #3e4042 !important;
}

.fb-gaming-player-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 16px !important;
}

.fb-gaming-player-avatar {
  width: 56px !important;
  height: 56px !important;
  border-radius: 12px !important;
  object-fit: cover !important;
  margin-right: 14px !important;
}

body[dir="rtl"] .fb-gaming-player-avatar {
  margin-right: 0 !important;
  margin-left: 14px !important;
}

.fb-gaming-player-title {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 0 4px 0 !important;
  line-height: 1.25 !important;
}

body.night-mode .fb-gaming-player-title {
  color: #e4e6eb !important;
}

.fb-gaming-player-meta {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.fb-gaming-player-desc {
  font-size: 13px !important;
  color: #65676b !important;
}

body.night-mode .fb-gaming-player-desc {
  color: #b0b3b8 !important;
}

.fb-gaming-btn-light {
  background-color: #e4e6eb !important;
  color: #050505 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  border-radius: 6px !important;
  padding: 6px 14px !important;
  border: none !important;
  transition: background-color 0.15s ease !important;
}

.fb-gaming-btn-light:hover {
  background-color: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .fb-gaming-btn-light {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-gaming-btn-light:hover {
  background-color: #4e4f50 !important;
}

.fb-gaming-iframe-box {
  border-radius: 12px !important;
  overflow: hidden !important;
  background-color: #000000 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

/* Titles and General */
.fb-gaming-title-main {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  margin: 0 0 4px 0 !important;
}

body.night-mode .fb-gaming-title-main {
  color: #e4e6eb !important;
}

.fb-gaming-desc-main {
  font-size: 14px !important;
  color: #65676b !important;
  margin: 0 !important;
}

body.night-mode .fb-gaming-desc-main {
  color: #b0b3b8 !important;
}

/* Responsive */
@media (max-width: 991.98px) {
  .fb-gaming-page {
    flex-direction: column !important;
  }

  .fb-gaming-sidebar {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    position: static !important;
    border-right: none !important;
    border-bottom: 1px solid #ced0d4 !important;
  }

  .fb-gaming-container {
    padding: 16px !important;
  }
}

/* ==========================================================================
   UNIFIED OPENAI & MODERN DESIGN SYSTEM
   Standardizing Cards, Elevation, Visual Hierarchy, Aspect Ratios,
   and Focused CTAs across Feed, Friends, Groups, Pages, Events, Watch,
   Reels, Saved, Memories, Games, Movies, Forums, Blogs, Jobs, Courses,
   Offers, and Wallet.
   ========================================================================== */

/* 1. Global Card Foundation (Tokens & Surfaces) */
.ui-box,
.card,
.movie-card,
.blog-container,
.post-media,
.job-card,
.course-card,
.offer-card,
.wallet-card,
.forum-card,
.fb-group-card,
.fb-page-card,
.post,
.publisher,
.directory-hub-card {
  border-radius: 12px !important;
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s cubic-bezier(0.2, 0, 0.13, 1), box-shadow 0.2s ease !important;
}

body.night-mode .ui-box,
body.night-mode .card,
body.night-mode .movie-card,
body.night-mode .blog-container,
body.night-mode .post-media,
body.night-mode .job-card,
body.night-mode .course-card,
body.night-mode .offer-card,
body.night-mode .wallet-card,
body.night-mode .forum-card,
body.night-mode .fb-group-card,
body.night-mode .fb-page-card,
body.night-mode .post,
body.night-mode .publisher,
body.night-mode .directory-hub-card {
  background-color: #242526 !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25) !important;
}

/* Discovery Cards Hover Micro-Lift */
.ui-box:hover,
.movie-card:hover,
.blog-container:hover,
.job-card:hover,
.course-card:hover,
.offer-card:hover,
.fb-group-card:hover,
.fb-page-card:hover,
.directory-hub-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
}

body.night-mode .ui-box:hover,
body.night-mode .movie-card:hover,
body.night-mode .blog-container:hover,
body.night-mode .job-card:hover,
body.night-mode .course-card:hover,
body.night-mode .offer-card:hover,
body.night-mode .fb-group-card:hover,
body.night-mode .fb-page-card:hover,
body.night-mode .directory-hub-card:hover {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Global Button Discipline (Focused 1-2 CTAs, 8px Radius) */
.ui-box .btn,
.card .btn,
.post .btn,
.movie-card .btn,
.blog-container .btn,
.job-card .btn,
.course-card .btn,
.offer-card .btn,
.wallet-card .btn,
.fb-group-card .btn,
.fb-page-card .btn,
.feeds-item .btn,
.btn-primary,
.btn-light,
.btn-secondary,
.btn-danger,
.btn-success,
.btn-info {
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  height: 36px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  border: none !important;
  transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease !important;
}

/* Primary Brand CTAs */
.btn-primary,
.btn-success,
.fb-btn-join,
.js_friend-add,
.js_like-page,
.js_interest-event,
.ui-box .btn-primary,
.ui-box .btn-success {
  background-color: #0866ff !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-success:hover,
.fb-btn-join:hover,
.js_friend-add:hover,
.js_like-page:hover,
.js_interest-event:hover {
  background-color: #1877f2 !important;
  color: #ffffff !important;
}

/* Secondary & Muted CTAs */
.btn-light,
.btn-secondary,
.fb-btn-joined,
.js_leave-group,
.js_unlike-page,
.js_friend-cancel,
.js_uninterest-event,
.ui-box .btn-light {
  background-color: #e4e6eb !important;
  color: #050505 !important;
}

.btn-light:hover,
.btn-secondary:hover,
.fb-btn-joined:hover,
.js_leave-group:hover,
.js_unlike-page:hover,
.js_friend-cancel:hover,
.js_uninterest-event:hover {
  background-color: #d8dadf !important;
  color: #050505 !important;
}

body.night-mode .btn-light,
body.night-mode .btn-secondary,
body.night-mode .fb-btn-joined,
body.night-mode .js_leave-group,
body.night-mode .js_unlike-page,
body.night-mode .js_friend-cancel,
body.night-mode .js_uninterest-event,
body.night-mode .ui-box .btn-light {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .btn-light:hover,
body.night-mode .btn-secondary:hover,
body.night-mode .fb-btn-joined:hover,
body.night-mode .js_leave-group:hover,
body.night-mode .js_unlike-page:hover,
body.night-mode .js_friend-cancel:hover,
body.night-mode .js_uninterest-event:hover {
  background-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

/* 3. Aspect Ratio & Media Enforcement (Zero Distortion) */

/* Friends / People Discovery Card */
.ui-box {
  padding: 16px !important;
  text-align: center !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ui-box .img {
  width: 96px !important;
  height: 96px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  margin: 0 auto 10px auto !important;
  background-color: #e4e6eb !important;
}

body.night-mode .ui-box .img {
  background-color: #3a3b3c !important;
}

.ui-box .img img,
.ui-box img {
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  display: block !important;
}

.ui-box a.h6,
.ui-box .h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  color: #050505 !important;
  text-decoration: none !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

body.night-mode .ui-box a.h6,
body.night-mode .ui-box .h6 {
  color: #e4e6eb !important;
}

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

/* Groups and Pages Discovery Cards */
.fb-group-card,
.fb-page-card {
  padding: 0 0 14px 0 !important;
  overflow: hidden !important;
}

.fb-group-card-cover,
.fb-page-card-cover {
  width: 100% !important;
  height: 100px !important;
  aspect-ratio: 16 / 9 !important;
  background-size: cover !important;
  background-position: center !important;
  background-color: #3a3b3c !important;
}

.fb-group-card-avatar,
.fb-page-card-avatar {
  margin: -36px auto 8px auto !important;
  width: 68px !important;
  height: 68px !important;
  aspect-ratio: 1 / 1 !important;
  border-radius: 50% !important;
  border: 3px solid #ffffff !important;
  overflow: hidden !important;
  background-color: #e4e6eb !important;
  position: relative !important;
  z-index: 2 !important;
}

body.night-mode .fb-group-card-avatar,
body.night-mode .fb-page-card-avatar {
  border-color: #242526 !important;
  background-color: #3a3b3c !important;
}

.fb-group-card-avatar img,
.fb-page-card-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.fb-group-card-details,
.fb-page-card-details {
  padding: 0 14px !important;
  width: 100% !important;
  text-align: center !important;
}

.fb-group-card-title,
.fb-page-card-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-decoration: none !important;
}

body.night-mode .fb-group-card-title,
body.night-mode .fb-page-card-title {
  color: #e4e6eb !important;
}

.fb-group-card-meta,
.fb-page-card-meta {
  font-size: 13px !important;
  color: #65676b !important;
  margin-top: 3px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

body.night-mode .fb-group-card-meta,
body.night-mode .fb-page-card-meta {
  color: #b0b3b8 !important;
}

.fb-group-card-action,
.fb-page-card-action {
  padding: 10px 14px 0 14px !important;
  width: 100% !important;
}

/* Movie Cards (Poster 2:3 Aspect Ratio) */
.movie-card {
  border-radius: 12px !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

.movie-card-top {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 2 / 3 !important;
  overflow: hidden !important;
  background-color: #000000 !important;
  display: block !important;
}

.movie-picture {
  width: 100% !important;
  height: 100% !important;
  background-size: cover !important;
  background-position: center !important;
  transition: transform 0.25s cubic-bezier(0.2, 0, 0.13, 1) !important;
}

.movie-card:hover .movie-picture {
  transform: scale(1.05) !important;
}

.movie-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  text-decoration: none !important;
}

body.night-mode .movie-title {
  color: #e4e6eb !important;
}

.movie-year {
  font-size: 13px !important;
  color: #65676b !important;
}

body.night-mode .movie-year {
  color: #b0b3b8 !important;
}

/* Watch & Video Players (16:9 Aspect Ratio) */
.post-video,
.video-player,
.fb-watch-video-wrapper {
  aspect-ratio: 16 / 9 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  background-color: #000000 !important;
}

/* Reels (9:16 Aspect Ratio) */
.reel-card,
.reels-item,
.fb-reel-container {
  aspect-ratio: 9 / 16 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: #000000 !important;
}

/* Blog Cards (16:9 Aspect Ratio, line-clamp text) */
.blog-container {
  overflow: hidden !important;
  text-decoration: none !important;
}

.blog-image {
  aspect-ratio: 16 / 9 !important;
  overflow: hidden !important;
  width: 100% !important;
  background-color: #3a3b3c !important;
}

.blog-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.25s ease !important;
}

.blog-container:hover .blog-image img {
  transform: scale(1.05) !important;
}

.blog-content h3 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #050505 !important;
  line-height: 1.35 !important;
  margin: 12px 0 6px 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body.night-mode .blog-content h3 {
  color: #e4e6eb !important;
}

.blog-content .text {
  font-size: 13.5px !important;
  color: #65676b !important;
  line-height: 1.45 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

body.night-mode .blog-content .text {
  color: #b0b3b8 !important;
}

/* 4. List Feeds Discipline (Feeds Item Rows) */
.feeds-item {
  padding: 12px 14px !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  transition: background 0.15s ease !important;
}

body.night-mode .feeds-item {
  border-bottom-color: rgba(255, 255, 255, 0.08) !important;
}

.feeds-item:hover {
  background-color: rgba(0, 0, 0, 0.02) !important;
}

body.night-mode .feeds-item:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

.feeds-item .data-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  aspect-ratio: 1 / 1 !important;
  flex-shrink: 0 !important;
}

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

.feeds-item .data-content .name {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #050505 !important;
}

body.night-mode .feeds-item .data-content .name {
  color: #e4e6eb !important;
}

/* 5. Navigation Category Pills */
.ds-cat-pill,
.category-pill,
.nav-pills .nav-link {
  border-radius: 20px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  padding: 6px 14px !important;
  border: none !important;
  background-color: #e4e6eb !important;
  color: #050505 !important;
  transition: background 0.15s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  text-decoration: none !important;
}

body.night-mode .ds-cat-pill,
body.night-mode .category-pill,
body.night-mode .nav-pills .nav-link {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

.ds-cat-pill.active,
.category-pill.active,
.nav-pills .nav-link.active {
  background-color: #0866ff !important;
  color: #ffffff !important;
}

/* 6. Wallet Cards Modernization */
.wallet-card,
.wallet-intro {
  border-radius: 12px !important;
  padding: 20px !important;
}

/* 7. No Nested Scrollbar Guarantee */
.ui-box,
.card-body,
.fb-gaming-page,
.feeds-item,
.post {
  overflow-y: visible !important;
}

/* ============================================================
   Facebook Friends Page (people.tpl)
   ============================================================ */
.fb-friends-shell {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 56px);
  background-color: var(--ds-surface-2, #f0f2f5);
  color: var(--ds-text-primary, #050505);
}

.fb-friends-sidebar {
  width: 360px;
  min-width: 320px;
  max-width: 380px;
  flex: 0 0 360px;
  background-color: var(--ds-surface-el, #ffffff);
  border-right: 1px solid var(--border-color, #e4e6eb);
  height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  overflow-y: auto;
  padding: 12px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 10;
}

[dir="rtl"] .fb-friends-sidebar {
  border-right: none;
  border-left: 1px solid var(--border-color, #e4e6eb);
}

.fb-friends-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 14px;
}

.fb-friends-sidebar-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0;
  letter-spacing: -0.3px;
}

.fb-friends-round-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.15s ease;
}

.fb-friends-round-btn:hover {
  background-color: var(--ds-hover-bg, #d8dadf);
  color: var(--ds-text-primary, #050505);
}

.fb-friends-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fb-friends-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ds-text-primary, #050505);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}

.fb-friends-nav-item:hover {
  background-color: var(--ds-hover-bg, #f2f2f2);
  color: var(--ds-text-primary, #050505);
}

.fb-friends-nav-item.active {
  background-color: var(--ds-hover-bg, #f0f2f5);
}

.fb-friends-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.fb-friends-nav-icon.active-home {
  background-color: #1877f2;
  color: #ffffff;
}

.fb-friends-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-friends-chevron {
  color: var(--ds-text-secondary, #65676b);
  font-size: 13px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

[dir="rtl"] .fb-friends-chevron {
  margin-left: 0;
  margin-right: auto;
  transform: rotate(180deg);
}

.fb-search-toggle-icon.is-open {
  transform: rotate(180deg);
}

.fb-friends-badge {
  margin-left: auto;
  margin-right: 6px;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
}

[dir="rtl"] .fb-friends-badge {
  margin-left: 6px;
  margin-right: auto;
}

.fb-friends-search-panel {
  display: none;
  margin-top: 8px;
  padding: 12px 10px;
  border-radius: 8px;
  background-color: var(--ds-surface-2, #f0f2f5);
  border: 1px solid var(--border-color, #e4e6eb);
  transition: all 0.25s ease;
}

.fb-friends-search-panel.show {
  display: block;
}

.fb-friends-main {
  flex: 1;
  min-width: 0;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 24px 32px;
  background-color: var(--ds-surface-2, #f0f2f5);
}

.fb-friends-main-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.fb-friends-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.fb-friends-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.fb-friends-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0;
}

.fb-friends-see-all {
  color: #1877f2;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}

.fb-friends-see-all:hover {
  text-decoration: underline;
  color: #166fe5;
}

.fb-friends-cards-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(185px, 1fr));
  gap: 10px;
}

.fb-friend-card {
  background-color: var(--ds-surface-el, #ffffff);
  border-radius: 8px;
  border: 1px solid var(--border-color, #e4e6eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.fb-friend-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.fb-friend-card-thumb {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  position: relative;
  background-color: var(--ds-surface-el, #ffffff);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fb-friend-card-thumb a {
  display: block;
  width: 100%;
  height: 100%;
}

.fb-friend-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0 !important;
  transition: transform 0.25s ease;
}

.fb-friend-card:hover .fb-friend-card-thumb img {
  transform: scale(1.02);
}

.fb-friend-card-content {
  padding: 12px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  gap: 10px;
}

.fb-friend-card-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-friend-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
  text-decoration: none;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.fb-friend-card-name:hover {
  text-decoration: underline;
  color: var(--ds-text-primary, #050505);
}

.fb-friend-card-mutual {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--ds-text-secondary, #65676b);
  min-height: 20px;
  line-height: 1.2;
}

.fb-friend-card-mini-avatars {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.fb-friend-mini-avatar {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--ds-surface-el, #ffffff);
  display: inline-block;
}

.fb-friend-mini-avatar-overlap {
  margin-left: -5px;
}

[dir="rtl"] .fb-friend-mini-avatar-overlap {
  margin-left: 0;
  margin-right: -5px;
}

.fb-friend-card-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: auto;
}

.fb-btn-primary {
  width: 100%;
  height: 36px;
  background-color: #1877f2;
  color: #ffffff !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.fb-btn-primary:hover {
  background-color: #166fe5;
  color: #ffffff !important;
}

.fb-btn-soft-primary {
  width: 100%;
  height: 36px;
  background-color: var(--ds-primary-subtle, #e7f3ff);
  color: #1877f2 !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.fb-btn-soft-primary:hover {
  background-color: #dbe7f2;
  color: #1877f2 !important;
}

.fb-btn-secondary {
  width: 100%;
  height: 36px;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505) !important;
  border-radius: 6px;
  font-weight: 600;
  font-size: 15px;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.fb-btn-secondary:hover {
  background-color: var(--ds-hover-bg, #d8dadf);
  color: var(--ds-text-primary, #050505) !important;
}

[data-mode="night"] .fb-friends-shell,
.mode-night .fb-friends-shell,
body.night-mode .fb-friends-shell {
  --ds-surface-el: #242526;
  --ds-surface-2: #18191a;
  --ds-text-primary: #e4e6eb;
  --ds-text-secondary: #b0b3b8;
  --border-color: #393a3b;
  --ds-muted: #3a3b3c;
  --ds-hover-bg: #303031;
  --ds-primary-subtle: rgba(45, 136, 255, 0.2);
}

[data-mode="night"] .fb-btn-soft-primary,
.mode-night .fb-btn-soft-primary,
body.night-mode .fb-btn-soft-primary {
  background-color: rgba(45, 136, 255, 0.2);
  color: #2d88ff !important;
}

[data-mode="night"] .fb-btn-secondary,
.mode-night .fb-btn-secondary,
body.night-mode .fb-btn-secondary {
  background-color: #3a3b3c;
  color: #e4e6eb !important;
}

.post,
.post-body,
.post-colored .post-text,
.post-colored,
.post-colored-text-wrapper {
  overflow-y: visible !important;
  overflow-x: visible !important;
}

.post-body .post-text {
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

.post-body .post-text.js_readmore[data-readmore] {
  overflow: hidden !important;
}

.post-body .post-text.js_readmore[data-readmore][aria-expanded="true"] {
  height: auto !important;
  overflow: visible !important;
}

.post-replace>a[data-readmore-toggle] {
  display: inline-block !important;
  margin: 6px 16px 12px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  color: #65676b !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

[dir="rtl"] .post-replace>a[data-readmore-toggle] {
  margin: 6px 16px 12px !important;
}

.post-replace>a[data-readmore-toggle]:hover {
  text-decoration: underline !important;
  color: #0866ff !important;
}

body.night-mode .post-replace>a[data-readmore-toggle] {
  color: #b0b3b8 !important;
}

body.night-mode .post-replace>a[data-readmore-toggle]:hover {
  color: #4599ff !important;
}

.post-colored {
  height: auto !important;
  min-height: 240px !important;
  overflow: visible !important;
}

.post-colored-text-wrapper {
  height: auto !important;
  min-height: 180px !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-y: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.post-colored-text-wrapper::-webkit-scrollbar,
.post .js_scroller::-webkit-scrollbar,
.post::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.post-colored-text-wrapper,
.post .js_scroller {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.post .slimScrollBar,
.post .slimScrollRail,
.post-colored .slimScrollBar,
.post-colored .slimScrollRail {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.fb-product-bar {
  padding: 10px 16px 12px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.fb-prod-line1 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 34px;
}

.fb-prod-title {
  font-size: 18px;
  font-weight: 700;
  color: #050505;
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.2px;
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

body.night-mode .fb-prod-title {
  color: #e4e6eb;
}

.fb-prod-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.fb-prod-btn {
  height: 34px !important;
  padding: 0 14px !important;
  border-radius: 6px !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  white-space: nowrap !important;
  box-shadow: none !important;
  transition: all 0.15s ease !important;
}

.fb-prod-seller-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.fb-prod-line2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-size: 14px;
  line-height: 1.4;
  color: #65676b;
}

body.night-mode .fb-prod-line2 {
  color: #b0b3b8;
}

.fb-prod-price {
  font-size: 16px;
  font-weight: 800;
  color: #1877f2;
  letter-spacing: -0.2px;
}

body.night-mode .fb-prod-price {
  color: #4599ff;
}

.fb-prod-sep {
  color: #bec3c9;
  font-weight: bold;
  user-select: none;
}

body.night-mode .fb-prod-sep {
  color: #4e4f50;
}

.fb-prod-meta-item {
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}

.fb-prod-category-tag {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.fb-prod-category-tag:hover {
  color: #1877f2;
  text-decoration: underline;
}

body.night-mode .fb-prod-category-tag:hover {
  color: #4599ff;
}

.fb-prod-sold-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: #fde8e8;
  color: #c81e1e;
  text-transform: uppercase;
}

body.night-mode .fb-prod-sold-badge {
  background: rgba(239, 68, 68, 0.2);
  color: #f87171;
}

.fb-prod-digital-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 4px;
  background: #f3e8ff;
  color: #7e22ce;
}

body.night-mode .fb-prod-digital-tag {
  background: rgba(168, 85, 247, 0.2);
  color: #c084fc;
}

.fb-prod-cfields-inline {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
  font-size: 13px;
  color: #65676b;
}

body.night-mode .fb-prod-cfields-inline {
  color: #b0b3b8;
}

.fb-prod-cfield-lbl {
  font-weight: 600;
}

.fb-prod-post-text {
  margin-top: 8px !important;
  padding-top: 8px !important;
  border-top: 1px solid #e4e6eb !important;
  font-size: 14.5px !important;
  line-height: 1.5 !important;
  color: #050505 !important;
}

body.night-mode .fb-prod-post-text {
  border-top-color: #393a3b !important;
  color: #e4e6eb !important;
}

@media (max-width: 576px) {
  .fb-prod-line1 {
    flex-wrap: wrap;
    gap: 8px;
  }

  .fb-prod-actions {
    width: 100%;
  }

  .fb-prod-btn {
    flex: 1;
    justify-content: center;
  }
}

/* ============================================================
   Facebook Admin Panel Layout (Matching people.tpl / market.tpl)
   ============================================================ */
.fb-admin-shell {
  display: flex;
  width: 100%;
  min-height: calc(100vh - 56px);
  background-color: var(--ds-surface-2, #f0f2f5);
  color: var(--ds-text-primary, #050505);
}

.fb-admin-sidebar {
  width: 360px;
  min-width: 320px;
  max-width: 380px;
  flex: 0 0 360px;
  background-color: var(--ds-surface-el, #ffffff);
  border-right: 1px solid var(--border-color, #e4e6eb);
  height: calc(100vh - 56px);
  position: sticky;
  top: 56px;
  overflow-y: auto;
  padding: 12px 8px 24px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 10;
}

[dir="rtl"] .fb-admin-sidebar {
  border-right: none;
  border-left: 1px solid var(--border-color, #e4e6eb);
}

.fb-admin-sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px 10px;
}

.fb-admin-sidebar-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0;
  letter-spacing: -0.3px;
}

.fb-admin-round-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.15s ease;
}

.fb-admin-round-btn:hover {
  background-color: var(--ds-hover-bg, #d8dadf);
  color: var(--ds-text-primary, #050505);
}

.fb-admin-search-wrapper {
  padding: 0 6px 8px;
}

.fb-admin-search-box {
  display: flex;
  align-items: center;
  background-color: var(--ds-surface-2, #f0f2f5);
  border-radius: 50px;
  padding: 8px 12px;
  gap: 8px;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}

.fb-admin-search-box:focus-within {
  background-color: var(--ds-surface-el, #ffffff);
  border-color: #1877f2;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2);
}

.fb-admin-search-icon {
  color: var(--ds-text-secondary, #65676b);
  font-size: 14px;
}

.fb-admin-search-input {
  border: none;
  background: transparent;
  outline: none;
  font-size: 14px;
  color: var(--ds-text-primary, #050505);
  width: 100%;
}

.fb-admin-nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fb-admin-nav-heading {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--ds-text-secondary, #65676b);
  padding: 10px 12px 4px;
  margin-top: 6px;
}

.fb-admin-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  color: var(--ds-text-primary, #050505);
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease;
  user-select: none;
}

.fb-admin-nav-item:hover {
  background-color: var(--ds-hover-bg, #f2f2f2);
  color: var(--ds-text-primary, #050505);
}

.fb-admin-nav-item.active {
  background-color: var(--ds-hover-bg, #f0f2f5);
}

.fb-admin-nav-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  transition: all 0.15s ease;
}

.fb-admin-nav-icon.active-blue {
  background-color: #1877f2;
  color: #ffffff;
}

.fb-admin-nav-label {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-admin-chevron {
  color: var(--ds-text-secondary, #65676b);
  font-size: 13px;
  margin-left: auto;
  transition: transform 0.2s ease;
}

[dir="rtl"] .fb-admin-chevron {
  margin-left: 0;
  margin-right: auto;
}

.fb-admin-chevron.rotate {
  transform: rotate(180deg);
}

.fb-admin-badge {
  margin-left: auto;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 7px;
}

[dir="rtl"] .fb-admin-badge {
  margin-left: 0;
  margin-right: auto;
}

.fb-admin-subnav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0 6px 46px;
}

[dir="rtl"] .fb-admin-subnav-list {
  padding: 4px 46px 6px 0;
}

.fb-admin-subnav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 12px;
  border-radius: 6px;
  color: var(--ds-text-secondary, #65676b);
  text-decoration: none !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.15s ease;
}

.fb-admin-subnav-item:hover {
  background-color: var(--ds-hover-bg, #f2f2f2);
  color: var(--ds-text-primary, #050505);
}

.fb-admin-subnav-item.active {
  background-color: var(--ds-primary-subtle, rgba(24, 119, 242, 0.1));
  color: #1877f2;
  font-weight: 600;
}

.fb-admin-subnav-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  opacity: 0.6;
}

.fb-admin-main {
  flex: 1;
  min-width: 0;
  height: calc(100vh - 56px);
  overflow-y: auto;
  padding: 24px 32px;
  background-color: var(--ds-surface-2, #f0f2f5);
}

.fb-admin-main-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.fb-admin-main .card {
  border-radius: 10px !important;
  border: 1px solid var(--border-color, #e4e6eb) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
  background-color: var(--ds-surface-el, #ffffff) !important;
  margin-bottom: 24px !important;
  overflow: hidden !important;
}

.fb-admin-main .card-header {
  background-color: var(--ds-surface-el, #ffffff) !important;
  border-bottom: 1px solid var(--border-color, #e4e6eb) !important;
  padding: 16px 20px !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .card-header.with-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.fb-admin-main .card-header.with-nav {
  display: block !important;
  padding-bottom: 0 !important;
}

.fb-admin-main .card-header .float-end {
  display: flex;
  align-items: center;
  gap: 8px;
  float: none !important;
  margin-left: auto;
}

[dir="rtl"] .fb-admin-main .card-header .float-end {
  margin-left: 0;
  margin-right: auto;
}

.fb-admin-main .nav-tabs {
  border-bottom: none !important;
  gap: 4px;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
}

.fb-admin-main .nav-tabs .nav-item {
  margin-bottom: 0;
}

.fb-admin-main .nav-tabs .nav-link {
  border: none !important;
  border-bottom: 3px solid transparent !important;
  background: transparent !important;
  color: var(--ds-text-secondary, #65676b) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: all 0.15s ease !important;
}

.fb-admin-main .nav-tabs .nav-link:hover {
  color: var(--ds-text-primary, #050505) !important;
  background-color: var(--ds-hover-bg, #f2f2f2) !important;
  border-radius: 8px 8px 0 0 !important;
}

.fb-admin-main .nav-tabs .nav-link.active {
  color: #1877f2 !important;
  border-bottom-color: #1877f2 !important;
  background: transparent !important;
}

.fb-admin-main .form-table-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-color, #e4e6eb);
  background-color: var(--ds-surface-el, #ffffff);
  transition: background-color 0.15s ease;
}

.fb-admin-main .form-table-row:hover {
  background-color: var(--ds-hover-bg, #f7f8fa);
}

.fb-admin-main .form-table-row:last-child {
  border-bottom: none;
}

.fb-admin-main .form-table-row>.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: var(--ds-muted, #f0f2f5);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  color: #1877f2;
}

.fb-admin-main .form-table-row>div:nth-child(2) {
  flex: 1;
  min-width: 0;
}

.fb-admin-main .form-table-row .form-label,
.fb-admin-main .form-table-row .h6 {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--ds-text-primary, #050505) !important;
  margin-bottom: 3px !important;
}

.fb-admin-main .form-table-row .form-text {
  font-size: 13.5px !important;
  color: var(--ds-text-secondary, #65676b) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
}

.fb-admin-main .form-table-row .text-end {
  flex-shrink: 0;
}

.fb-admin-main .switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  margin: 0;
  vertical-align: middle;
}

.fb-admin-main .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.fb-admin-main .slider.round {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ced0d4;
  transition: 0.25s cubic-bezier(0.2, 0, 0, 1);
  border-radius: 26px;
}

.fb-admin-main .slider.round:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 3px;
  bottom: 3px;
  background-color: #ffffff;
  transition: 0.25s cubic-bezier(0.2, 0, 0, 1);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.fb-admin-main .switch input:checked+.slider.round {
  background-color: #1877f2;
}

.fb-admin-main .switch input:checked+.slider.round:before {
  transform: translateX(22px);
}

[dir="rtl"] .fb-admin-main .switch input:checked+.slider.round:before {
  transform: translateX(-22px);
}

.fb-admin-main .form-group,
.fb-admin-main .row.form-group,
.fb-admin-main .row.mb-3,
.fb-admin-main .row.mb20 {
  padding: 14px 20px;
  margin: 0;
  border-bottom: 1px solid var(--border-color, #e4e6eb);
  align-items: center;
}

.fb-admin-main .form-group:last-child,
.fb-admin-main .row.form-group:last-child,
.fb-admin-main .row.mb-3:last-child,
.fb-admin-main .row.mb20:last-child {
  border-bottom: none;
}

.fb-admin-main .form-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ds-text-primary, #050505) !important;
  margin-bottom: 6px !important;
}

.fb-admin-main .form-control,
.fb-admin-main .form-select {
  border-radius: 8px !important;
  border: 1px solid var(--border-color, #ced0d4) !important;
  background-color: var(--ds-surface-el, #ffffff) !important;
  color: var(--ds-text-primary, #050505) !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  transition: all 0.15s ease !important;
}

.fb-admin-main .form-control:focus,
.fb-admin-main .form-select:focus {
  border-color: #1877f2 !important;
  box-shadow: 0 0 0 2px rgba(24, 119, 242, 0.2) !important;
}

.fb-admin-main .form-text,
.fb-admin-main .text-muted {
  font-size: 13px !important;
  color: var(--ds-text-secondary, #65676b) !important;
}

.fb-admin-main .input-group-text {
  background-color: var(--ds-surface-2, #f0f2f5) !important;
  border-color: var(--border-color, #ced0d4) !important;
  color: var(--ds-text-secondary, #65676b) !important;
  border-radius: 8px !important;
}

.fb-admin-main .card-body {
  padding: 20px !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .card-footer {
  background-color: var(--ds-surface-el, #ffffff) !important;
  border-top: 1px solid var(--border-color, #e4e6eb) !important;
  padding: 16px 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.fb-admin-main .table-responsive {
  border-radius: 0 0 8px 8px;
  margin-bottom: 0;
}

.fb-admin-main .table {
  margin-bottom: 0 !important;
  border-color: var(--border-color, #e4e6eb) !important;
  color: var(--ds-text-primary, #050505) !important;
  width: 100% !important;
}

.fb-admin-main .table thead th {
  background-color: var(--ds-surface-2, #f0f2f5) !important;
  color: var(--ds-text-secondary, #65676b) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  border-top: none !important;
  border-bottom: 1px solid var(--border-color, #e4e6eb) !important;
  padding: 12px 16px !important;
  white-space: nowrap !important;
}

.fb-admin-main .table tbody td {
  padding: 14px 16px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid var(--border-color, #e4e6eb) !important;
  color: var(--ds-text-primary, #050505) !important;
  font-size: 14px !important;
  background-color: var(--ds-surface-el, #ffffff) !important;
  transition: background-color 0.15s ease;
}

.fb-admin-main .table tbody tr:hover td {
  background-color: var(--ds-hover-bg, #f7f8fa) !important;
}

.fb-admin-main .table tbody tr:last-child td {
  border-bottom: none !important;
}

.fb-admin-main .btn {
  border-radius: 6px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  padding: 7px 14px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.15s ease !important;
}

.fb-admin-main .btn-primary {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}

.fb-admin-main .btn-primary:hover {
  background-color: #166fe5 !important;
  border-color: #166fe5 !important;
}

.fb-admin-main .btn-success {
  background-color: #42b72a !important;
  border-color: #42b72a !important;
  color: #ffffff !important;
}

.fb-admin-main .btn-success:hover {
  background-color: #36a420 !important;
  border-color: #36a420 !important;
}

.fb-admin-main .btn-danger {
  background-color: #fa383e !important;
  border-color: #fa383e !important;
  color: #ffffff !important;
}

.fb-admin-main .btn-danger:hover {
  background-color: #e0282e !important;
  border-color: #e0282e !important;
}

.fb-admin-main .btn-light,
.fb-admin-main .btn-secondary {
  background-color: var(--ds-muted, #e4e6eb) !important;
  border-color: transparent !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .btn-light:hover,
.fb-admin-main .btn-secondary:hover {
  background-color: var(--ds-hover-bg, #d8dadf) !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .badge {
  padding: 4px 10px !important;
  border-radius: 20px !important;
  font-weight: 600 !important;
  font-size: 12px !important;
}

.fb-admin-main .badge-success,
.fb-admin-main .badge.bg-success {
  background-color: rgba(66, 183, 42, 0.12) !important;
  color: #2e7d32 !important;
}

.fb-admin-main .badge-danger,
.fb-admin-main .badge.bg-danger {
  background-color: rgba(250, 56, 62, 0.12) !important;
  color: #d32f2f !important;
}

.fb-admin-main .badge-warning,
.fb-admin-main .badge.bg-warning {
  background-color: rgba(247, 177, 37, 0.15) !important;
  color: #b45309 !important;
}

.fb-admin-main .badge-info,
.fb-admin-main .badge.bg-info {
  background-color: rgba(24, 119, 242, 0.12) !important;
  color: #1877f2 !important;
}

.fb-admin-main .pagination {
  margin: 20px 0 10px !important;
  gap: 4px !important;
  justify-content: center !important;
}

.fb-admin-main .pagination .page-link {
  border-radius: 6px !important;
  border: 1px solid var(--border-color, #ced0d4) !important;
  background-color: var(--ds-surface-el, #ffffff) !important;
  color: var(--ds-text-primary, #050505) !important;
  font-weight: 600 !important;
  font-size: 13.5px !important;
  padding: 6px 12px !important;
}

.fb-admin-main .pagination .page-item.active .page-link {
  background-color: #1877f2 !important;
  border-color: #1877f2 !important;
  color: #ffffff !important;
}

.fb-admin-main .alert {
  border-radius: 8px !important;
  border: none !important;
  padding: 14px 18px !important;
  margin-bottom: 20px !important;
}

.fb-admin-main .alert-info {
  background-color: rgba(24, 119, 242, 0.08) !important;
  border-left: 4px solid #1877f2 !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .alert-success {
  background-color: rgba(66, 183, 42, 0.1) !important;
  border-left: 4px solid #42b72a !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .alert-warning {
  background-color: rgba(247, 177, 37, 0.1) !important;
  border-left: 4px solid #f7b125 !important;
  color: var(--ds-text-primary, #050505) !important;
}

.fb-admin-main .alert-danger {
  background-color: rgba(250, 56, 62, 0.1) !important;
  border-left: 4px solid #fa383e !important;
  color: var(--ds-text-primary, #050505) !important;
}

[dir="rtl"] .fb-admin-main .alert {
  border-left: none !important;
}

[dir="rtl"] .fb-admin-main .alert-info {
  border-right: 4px solid #1877f2 !important;
}

[dir="rtl"] .fb-admin-main .alert-success {
  border-right: 4px solid #42b72a !important;
}

[dir="rtl"] .fb-admin-main .alert-warning {
  border-right: 4px solid #f7b125 !important;
}

[dir="rtl"] .fb-admin-main .alert-danger {
  border-right: 4px solid #fa383e !important;
}

[data-mode="night"] .fb-admin-shell,
.mode-night .fb-admin-shell,
body.night-mode .fb-admin-shell {
  --ds-surface-el: #242526;
  --ds-surface-2: #18191a;
  --ds-text-primary: #e4e6eb;
  --ds-text-secondary: #b0b3b8;
  --border-color: #393a3b;
  --ds-muted: #3a3b3c;
  --ds-hover-bg: #303031;
  --ds-primary-subtle: rgba(45, 136, 255, 0.2);
  --ds-primary: #2d88ff;
}

body.night-mode .fb-admin-sidebar {
  background-color: #242526;
  border-color: #393a3b;
}

body.night-mode .fb-admin-main {
  background-color: #18191a;
}

body.night-mode .fb-admin-main .card,
body.night-mode .fb-admin-main .card-header,
body.night-mode .fb-admin-main .card-footer,
body.night-mode .fb-admin-main .stat-panel {
  background-color: #242526 !important;
  border-color: #393a3b !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-admin-main .table thead th {
  background-color: #18191a !important;
  border-color: #393a3b !important;
  color: #b0b3b8 !important;
}

body.night-mode .fb-admin-main .table tbody td {
  background-color: #242526 !important;
  border-color: #393a3b !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-admin-main .table tbody tr:hover td {
  background-color: #303031 !important;
}

body.night-mode .fb-admin-main .form-table-row {
  background-color: #242526 !important;
  border-bottom-color: #393a3b !important;
}

body.night-mode .fb-admin-main .form-table-row:hover {
  background-color: #303031 !important;
}

body.night-mode .fb-admin-main .form-table-row>.avatar {
  background-color: #3a3b3c !important;
}

body.night-mode .fb-admin-main .form-group,
body.night-mode .fb-admin-main .row.form-group,
body.night-mode .fb-admin-main .row.mb-3,
body.night-mode .fb-admin-main .row.mb20 {
  border-bottom-color: #393a3b !important;
}

body.night-mode .fb-admin-main .form-control,
body.night-mode .fb-admin-main .form-select {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-admin-main .input-group-text {
  background-color: #3a3b3c !important;
  border-color: #4e4f50 !important;
  color: #b0b3b8 !important;
}

body.night-mode .fb-admin-main .slider.round {
  background-color: #4e4f50 !important;
}

body.night-mode .fb-admin-main .switch input:checked+.slider.round {
  background-color: #2d88ff !important;
}

body.night-mode .fb-admin-main .nav-tabs .nav-link {
  color: #b0b3b8 !important;
}

body.night-mode .fb-admin-main .nav-tabs .nav-link:hover {
  background-color: #3a3b3c !important;
  color: #e4e6eb !important;
}

body.night-mode .fb-admin-main .nav-tabs .nav-link.active {
  color: #2d88ff !important;
  border-bottom-color: #2d88ff !important;
}

body.night-mode .fb-admin-main .pagination .page-link {
  background-color: #242526 !important;
  border-color: #393a3b !important;
  color: #e4e6eb !important;
}

@media (max-width: 991.98px) {
  .fb-admin-shell {
    flex-direction: column;
    height: auto;
    min-height: auto;
  }

  .fb-admin-sidebar {
    width: 100%;
    max-width: 100%;
    flex: none;
    height: auto;
    position: static;
    border-right: none;
    border-bottom: 1px solid var(--border-color, #e4e6eb);
    padding: 12px 16px;
  }

  .fb-admin-main {
    height: auto;
    padding: 16px 12px;
  }
}

/* Facebook Professional Dashboard (admin.JPG) */
.fb-admin-sidebar-footer {
  margin-top: auto;
  padding: 12px 6px 4px;
  position: sticky;
  bottom: 0;
  background: var(--ds-surface-el, #ffffff);
  border-top: 1px solid var(--border-color, #e4e6eb);
  z-index: 5;
}

body.night-mode .fb-admin-sidebar-footer {
  background: #242526;
  border-top-color: #393a3b;
}

.fb-admin-create-post-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  padding: 0 16px;
  background-color: #1877f2;
  color: #ffffff !important;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  transition: all 0.15s ease;
}

.fb-admin-create-post-btn:hover {
  background-color: #166fe5;
  color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.fb-admin-create-post-btn:active {
  transform: scale(0.98);
}

.fb-admin-fab {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: var(--ds-surface-el, #ffffff);
  color: var(--ds-text-primary, #050505) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18), 0 1px 4px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  text-decoration: none !important;
  z-index: 99;
  border: 1px solid var(--border-color, #e4e6eb);
  transition: all 0.2s cubic-bezier(0.2, 0, 0, 1);
}

[dir="rtl"] .fb-admin-fab {
  right: auto;
  left: 28px;
}

.fb-admin-fab:hover {
  transform: scale(1.06);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.24);
  color: #1877f2 !important;
}

body.night-mode .fb-admin-fab {
  background-color: #242526;
  border-color: #393a3b;
  color: #e4e6eb !important;
}

.fb-dash-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.fb-dash-topbar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fb-dash-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0;
  letter-spacing: -0.3px;
}

.fb-dash-subtitle {
  font-size: 15px;
  color: var(--ds-text-secondary, #65676b);
  margin: 0;
}

.fb-dash-topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fb-dash-range-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 6px;
  background-color: var(--ds-surface-el, #ffffff);
  border: 1px solid var(--border-color, #ced0d4);
  font-size: 14px;
  font-weight: 600;
  color: var(--ds-text-primary, #050505);
  transition: all 0.15s ease;
}

.fb-dash-range-btn:hover,
.fb-dash-range-btn:focus {
  background-color: var(--ds-hover-bg, #f2f2f2);
  color: var(--ds-text-primary, #050505);
  border-color: #1877f2;
}

body.night-mode .fb-dash-range-btn {
  background-color: #242526;
  border-color: #393a3b;
  color: #e4e6eb;
}

body.night-mode .fb-dash-range-btn:hover {
  background-color: #3a3b3c;
}

.fb-dash-see-all-link {
  font-size: 15px;
  font-weight: 600;
  color: #1877f2;
  text-decoration: none;
  transition: color 0.15s ease;
}

.fb-dash-see-all-link:hover {
  text-decoration: underline;
  color: #166fe5;
}

.fb-dash-card {
  background-color: var(--ds-surface-el, #ffffff);
  border-radius: 10px;
  border: 1px solid var(--border-color, #e4e6eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 16px 20px 20px;
  margin-bottom: 24px;
  overflow: hidden;
}

body.night-mode .fb-dash-card {
  background-color: #242526;
  border-color: #393a3b;
}

.fb-dash-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 20px;
}

.fb-dash-metric-card {
  background-color: var(--ds-surface-el, #ffffff);
  border: 1px solid var(--border-color, #e4e6eb);
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  transition: all 0.15s ease;
  user-select: none;
}

.fb-dash-metric-card:hover {
  border-color: #bec3c9;
}

.fb-dash-metric-card.active {
  border: 2px solid #1877f2 !important;
  background-color: rgba(24, 119, 242, 0.015);
}

body.night-mode .fb-dash-metric-card {
  background-color: #242526;
  border-color: #393a3b;
}

body.night-mode .fb-dash-metric-card.active {
  border-color: #2d88ff !important;
  background-color: rgba(45, 136, 255, 0.06);
}

.fb-dash-metric-icon {
  font-size: 18px;
  color: var(--ds-text-primary, #050505);
}

body.night-mode .fb-dash-metric-icon {
  color: #e4e6eb;
}

.fb-dash-metric-value-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.fb-dash-metric-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  line-height: 1.15;
  letter-spacing: -0.4px;
}

body.night-mode .fb-dash-metric-value {
  color: #e4e6eb;
}

.fb-dash-trend {
  font-size: 13.5px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.fb-dash-trend.up {
  color: #2e7d32;
}

.fb-dash-trend.down {
  color: #d32f2f;
}

body.night-mode .fb-dash-trend.up {
  color: #4ade80;
}

body.night-mode .fb-dash-trend.down {
  color: #f87171;
}

.fb-dash-live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
  color: #2e7d32;
  background: rgba(46, 125, 50, 0.1);
  padding: 2px 7px;
  border-radius: 20px;
}

body.night-mode .fb-dash-live-badge {
  color: #4ade80;
  background: rgba(74, 222, 128, 0.15);
}

.fb-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: currentColor;
  box-shadow: 0 0 0 rgba(46, 125, 50, 0.4);
  animation: fbPulse 1.8s infinite;
}

@keyframes fbPulse {
  0% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0.7);
  }

  70% {
    transform: scale(1);
    box-shadow: 0 0 0 6px rgba(46, 125, 50, 0);
  }

  100% {
    transform: scale(0.95);
    box-shadow: 0 0 0 0 rgba(46, 125, 50, 0);
  }
}

.fb-dash-metric-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  color: var(--ds-text-secondary, #65676b);
}

.fb-dash-info-icon {
  font-size: 13px;
  color: var(--ds-text-secondary, #65676b);
  cursor: help;
  opacity: 0.7;
}

.fb-dash-info-icon:hover {
  opacity: 1;
}

.fb-dash-chart-wrapper {
  width: 100%;
  min-height: 280px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color, #e4e6eb);
}

body.night-mode .fb-dash-chart-wrapper {
  border-top-color: #393a3b;
}

.fb-dash-section-card {
  background-color: var(--ds-surface-el, #ffffff);
  border-radius: 10px;
  border: 1px solid var(--border-color, #e4e6eb);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  padding: 20px 24px;
  margin-bottom: 24px;
}

body.night-mode .fb-dash-section-card {
  background-color: #242526;
  border-color: #393a3b;
}

.fb-dash-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.fb-dash-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
  margin: 0 0 4px 0;
  letter-spacing: -0.2px;
}

.fb-dash-section-subtitle {
  font-size: 14.5px;
  color: var(--ds-text-secondary, #65676b);
  margin: 0;
}

.fb-dash-content-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.fb-dash-item-card {
  background-color: var(--ds-surface-el, #ffffff);
  border: 1px solid var(--border-color, #e4e6eb);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.15s ease;
}

.fb-dash-item-card:hover {
  border-color: #bec3c9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

body.night-mode .fb-dash-item-card {
  background-color: #18191a;
  border-color: #393a3b;
}

.fb-dash-item-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fb-dash-item-thumb.post-thumb {
  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.fb-dash-item-thumb.page-thumb {
  background: linear-gradient(135deg, #1e3a8a 0%, #172554 100%);
}

.fb-dash-item-thumb.group-thumb {
  background: linear-gradient(135deg, #065f46 0%, #022c22 100%);
}

.fb-dash-item-thumb.event-thumb {
  background: linear-gradient(135deg, #7c2d12 0%, #431407 100%);
}

.fb-dash-thumb-icon {
  font-size: 28px;
  color: rgba(255, 255, 255, 0.85);
}

.fb-dash-item-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.fb-dash-item-stat {
  font-size: 15px;
  color: var(--ds-text-primary, #050505);
  display: flex;
  align-items: center;
}

.fb-dash-item-meta {
  font-size: 13px;
  color: var(--ds-text-secondary, #65676b);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.fb-dash-item-actions {
  margin-top: auto;
  padding-top: 8px;
}

.fb-dash-btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13.5px;
  font-weight: 600;
  background-color: var(--ds-muted, #e4e6eb);
  color: var(--ds-text-primary, #050505) !important;
  text-decoration: none !important;
  border: none;
  transition: all 0.15s ease;
}

.fb-dash-btn-soft:hover {
  background-color: var(--ds-hover-bg, #d8dadf);
}

body.night-mode .fb-dash-btn-soft {
  background-color: #3a3b3c;
  color: #e4e6eb !important;
}

body.night-mode .fb-dash-btn-soft:hover {
  background-color: #4e4f50;
}

.fb-dash-status-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.fb-dash-status-box {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background-color: var(--ds-surface-2, #f0f2f5);
  border: 1px solid var(--border-color, #e4e6eb);
  text-decoration: none !important;
  color: var(--ds-text-primary, #050505);
  transition: all 0.15s ease;
}

.fb-dash-status-box:hover {
  background-color: var(--ds-hover-bg, #e4e6eb);
  transform: translateY(-1px);
}

body.night-mode .fb-dash-status-box {
  background-color: #18191a;
  border-color: #393a3b;
  color: #e4e6eb;
}

body.night-mode .fb-dash-status-box:hover {
  background-color: #3a3b3c;
}

.fb-dash-status-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}

.bg-soft-primary {
  background-color: rgba(24, 119, 242, 0.12);
}

.bg-soft-success {
  background-color: rgba(46, 125, 50, 0.12);
}

.bg-soft-warning {
  background-color: rgba(245, 158, 11, 0.12);
}

.bg-soft-danger {
  background-color: rgba(239, 68, 68, 0.12);
}

.bg-soft-dark {
  background-color: rgba(100, 116, 139, 0.15);
}

.fb-dash-status-info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.fb-dash-status-num {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.2;
}

.fb-dash-status-lbl {
  font-size: 13px;
  color: var(--ds-text-secondary, #65676b);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fb-dash-status-arrow {
  color: var(--ds-text-secondary, #65676b);
  font-size: 13px;
  margin-left: auto;
}

[dir="rtl"] .fb-dash-status-arrow {
  margin-left: 0;
  margin-right: auto;
  transform: rotate(180deg);
}

.fb-dash-stats-pills-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}

.fb-dash-stat-pill {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 8px;
  background-color: var(--ds-surface-2, #f0f2f5);
  border: 1px solid var(--border-color, #e4e6eb);
}

body.night-mode .fb-dash-stat-pill {
  background-color: #18191a;
  border-color: #393a3b;
}

.fb-dash-stat-pill-icon {
  font-size: 18px;
}

.fb-dash-stat-pill-data {
  display: flex;
  flex-direction: column;
}

.fb-dash-stat-pill-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--ds-text-primary, #050505);
}

body.night-mode .fb-dash-stat-pill-num {
  color: #e4e6eb;
}

.fb-dash-stat-pill-lbl {
  font-size: 12.5px;
  color: var(--ds-text-secondary, #65676b);
}

@media (max-width: 1200px) {
  .fb-dash-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .fb-dash-content-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767.98px) {
  .fb-dash-metrics-grid {
    grid-template-columns: 1fr;
  }

  .fb-dash-content-grid {
    grid-template-columns: 1fr;
  }

  .fb-dash-topbar {
    flex-direction: column;
    align-items: flex-start;
  }
}