/* styles/Forums.module.css */
.forumWrapper {
  min-height: 100vh;
  margin-top: 1em;
}

/* Page title */
.pageTitle {
  margin: 0;
  font-weight: 700;
  color: #1b2b4a;
}

/* Top buttons */
.orangeBtn {
  border-color: #e9a14a;
  color: #e07a15;
}

/* CATEGORY cards */
.categoryCard {
  position: relative;
  overflow: hidden;
  height: 140px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #e9eef5 0%, #e2ecff 100%);
  box-shadow: 0 2px 8px rgba(12, 18, 34, 0.04);
}
.thumbPlaceholder {
  position: absolute;
  left: 14px;
  top: 14px;
  width: 78px;
  height: 60px;
  background: rgba(26, 85, 148, 0.12);
  border-radius: 6px;
  box-shadow: inset 0 -6px 10px rgba(0, 0, 0, 0.02);
}
.categoryTitle {
  margin-left: 110px;
  font-size: 1rem;
  color: #14325b;
  font-weight: 700;
}
.categoryMeta {
  margin-left: 110px;
  margin-top: 6px;
  color: #556a82;
}
.countText {
  display: inline-block;
  font-weight: 600;
  color: #2f3f59;
}

.discussionsCard {
  border: none;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  background: #fff;
}

.discussionsHeader {
  background-color: #f7f9fc;
  font-weight: 600;
  font-size: 1.1rem;
  border-bottom: 1px solid #e0e0e0;
}

.discussionItem {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 10px;
  /* border-bottom: 1px solid #eee; */
  transition: background 0.2s ease;
}

.discussionItem:hover {
  background: #f8f8f8;
}

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

.avatarCircle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9ecef;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-transform: uppercase;
}

.discussionTitle {
  margin: 0;
  font-size: 0.95rem;
  color: #222;
  cursor: pointer;
}

.discussionMeta {
  color: #666;
  font-size: 0.8rem;
}

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

.repliesBox {
  text-align: center;
  min-width: 50px;
}

.repliesNumber {
  font-weight: 700;
  font-size: 1rem;
}

.tagBadge {
  border-radius: 30px;
  padding: 6px 12px;
  font-size: 0.75rem;
  font-weight: 500;
  color: #fff !important; /* force white text */
  border: none !important;
}

/* Force custom backgrounds to take priority */
.greenTag {
  background-color: #00b67a !important;
}

.purpleTag {
  background-color: #6f42c1 !important;
}

.pinkTag {
  background-color: #d63384 !important;
}

/* Responsive */
@media (max-width: 576px) {
  .discussionItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .discussionRight {
    width: 100%;
    justify-content: space-between;
  }
}

/* Sidebar */
.searchBox {
  border-radius: 24px;
  padding: 10px 14px;
}
.recentList {
  margin: 0;
  padding: 0;
  list-style: none;
}
.recentItem {
  padding: 8px 0;
  /* border-bottom: 1px solid #f0f4fb; */
  font-size: 0.95rem;
  color: #27364a;
}

.forumsList {
  background: #fff;
  border-radius: 8px;
}

.forumDot {
  width: 8px;
  height: 8px;
  background-color: #c6cb9d; /* same pale green dot */
  border-radius: 50%;
  display: inline-block;
}

.forumCount {
  color: #9ca3af; /* soft gray numbers */
  font-weight: 600;
  font-size: 15px;
}

.forumSmallBadge {
  background: #f1f6ff;
  color: #1b2b4a;
  padding: 6px 8px;
  border-radius: 12px;
  font-weight: 700;
}

/* stats */
.statNumber {
  font-weight: 800;
  font-size: 1.05rem;
  margin-top: 6px;
  color: #123152;
}

/* latest updates */
.latestUpdates .updateRow {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f2f6fb;
}
.updateAvatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #e6f0ff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  cursor: pointer;
}
.updateText {
  font-size: 0.95rem;
  color: #14325b;
}

.formCategory {
  border-radius: 10px;
}

.forumTitle {
  font-size: 11px;
  font-weight: 700;
  color: #596a7d;
  margin-bottom: 4px;
  background-color: #eef0f2;
  max-width: fit-content;
  padding: 5px 10px;
  border-radius: 100px;
}

.forumSubTitle {
  font-size: 11px;
  font-weight: 700;
  color: #596a7d;
  margin-bottom: 4px;
  background-color: #eef0f2;
  max-width: fit-content;
  padding: 5px 10px;
  border-radius: 100px;
}

.forumTime {
  font-size: 0.85rem;
  color: #999;
  font-family: Open-Sans;
}

.searchWrapper {
  position: relative;
  display: inline-block;
  width: 100%;
}

.searchBox {
  padding-left: 40px !important;
  border-radius: 30px;
  border: 1px solid #ccc;
  height: 42px;
  box-shadow: none;
}

.searchIcon {
  position: absolute;
  left: 4%;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 16px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.searchIcon:hover {
  color: #1a5594; /* or your theme color */
}

.infoIcon {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s ease;
  color: "#ffff";
  background-color: #00447c;
}

.avatar {
  width: 45px;
  height: 45px;
  object-fit: cover;
  background-color: #fff;
  box-shadow: #e7e9ec;
}

.rightSidebar {
  background-color: #ffffff;
  border: 1px solid #e7e9ec;
  box-shadow: 0 2px 7px 1px rgba(0, 0, 0, 0), 0 6px 32px 0 rgba(18, 43, 70, 0.1);
}

.statLabel {
  font-weight: 400;
  font-size: 14px;
}

.statValue {
  font-weight: 600;
  font-size: 18px;
  color: #122b46;
}

.forumDescription {
  font-size: 14px;
  color: #122b46;
}

.sectionHeading {
  color: #122b46;
  font-size: 1.25rem;
}

.searchWrapper {
  position: relative;
}

.searchBox {
  border-radius: 50px;
  padding-left: 35px;
}

.searchIcon {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  color: #999;
  font-size: 14px;
}

.rightSidebar {
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  background-color: #fff;
}

.sectionHeading {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.ellipsis {
  font-family: "Open-Sans";
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* shimmering background */
@keyframes skeleton-shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

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

/* container for one skeleton item (like your input) */
.skeletonItem {
  display: inline-block;
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.2s linear infinite;
}

/* sizes */
.skeleton-lg {
  height: 48px;
  width: 100%;
} /* large (input-like) */
.skeleton-sm {
  height: 12px;
  width: 120px;
} /* small text chip */
.skeleton-circle {
  border-radius: 50%;
  height: 40px;
  width: 40px;
}

/* optional: control widths inline via style prop instead of creating many classes */

/* Responsive tweaks */
@media (max-width: 768px) {
  .imageSkeleton {
    height: 160px;
  }
}

/* Responsive adjustments */
@media (max-width: 991px) {
  .categoryTitle {
    margin-left: 96px;
  }
  .categoryMeta {
    margin-left: 96px;
  }
}
@media (max-width: 767px) {
  .forumWrapper {
    padding: 14px;
  }
  .categoryTitle {
    margin-left: 108px;
    font-size: 0.95rem;
  }
  .categoryMeta {
    margin-left: 108px;
    font-size: 0.86rem;
  }
  .discussionRight {
    gap: 8px;
  }
  .tagBadge {
    padding: 6px 10px;
    font-size: 0.78rem;
  }
  .pageTitle {
    font-size: 1.25rem;
  }
  .discussionsHeader {
    padding: 10px 12px;
  }
  .discussionItem {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .discussionRight {
    width: 100%;
    justify-content: space-between;
  }
  .repliesBox {
    text-align: left;
  }
}

.imageWrapper {
  width: 100%;
  height: 150px;
  position: relative;
  overflow: hidden;
  background-color: #c2c4c6;
  border-radius: 10px 10px 0 0;
}

.imageContent {
  object-fit: fill;
}
.profileImage {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.iconWrapper {
  position: absolute;
  bottom: 0;
  right: -20px;
  top: -12px;
  background-color: #d9d9d9;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
  font-size: 14px;
  color: white;
}

.pagination {
  display: flex;
  gap: 4px;
}

/* Page numbers */
.pagination :global(.page-link) {
  background: transparent !important;
  border: none !important;
  color: #4d5c6d !important;
  font-weight: 500;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  font-size: 12px;
}

/* Active page */
.pagination :global(.page-item.active .page-link) {
  background: #004a99 !important;
  color: #fff !important;
  border-radius: 8px !important;
}

/* Arrows */
.arrowBtn :global(.page-link) {
  background: #fff !important;
  border: 1px solid #dcdcdc !important;
  padding: 4px 9px !important;
  border-radius: 6px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
}

/* Hover effect */
.arrowBtn :global(.page-link:hover) {
  background: #f2f5fa !important;
}

.discussionContainer {
  position: relative;
  min-height: 400px; /* adjust as needed */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.info {
  font-size: 20px;
  cursor: pointer;
  transition: color 0.2s ease;
  color: "#ffff";
  background-color: #00447c;
  padding: 10px 8px;
  margin-left: 0;
}

.resultItem {
  transition: background-color 0.2s ease;
}

.resultItem:hover {
  background-color: #e6e7e75c;
}

.colorOne {
  background: #ffe6e6; /* light red */
  color: #b30000;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 14px;
}

.colorTwo {
  background: #e6ffe6; /* light green */
  color: #006600;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 14px;
}

.colorThree {
  background: #e6f0ff; /* light blue */
  color: #003399;
  padding: 5px 10px;
  border-radius: 50px;
  font-size: 14px;
}