/*  :root {

   --primary-soft: #2f5d45;
   --accent: #8daa91;

   --bg-page: #f2f1ea;
   --bg-section: #f8f7f3;
   --bg-card: #ffffff;

   --text-dark: #1f2d27;
   --text-muted: #6b7c73;

   --border-soft: #e2e6e1;



   --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.08);
   --shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
 }
 */
.updates-container {
  background: var(--bg-section-2);
  padding: 20px;
}

.updatestabs-wrapper {
  max-width: 1200px;
  margin: 30px auto;
  /*  background: #fff; */
  border-radius: 5px;

  overflow: hidden;
}

.tabs {

  margin: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, .1);
  overflow: hidden;
}

/* ===== Desktop Tabs ===== */
.tab-header {
  padding: 10px;
  position: relative;
  display: flex;
  background: var(--secondary);
  /*    border: 1px solid var(--border-color-1); */
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

.tab-btn {
  flex: 1;
  padding: 10px 0px;
  color: var(--primary);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  font-weight: 500;
  z-index: 1;
}

.tab-btn.active {
  color: var(--secondary);
  color: var(--text);
  font-weight: 500;
}

/* ===== Sliding Indicator ===== */
.tab-indicator {
  position: absolute;
  inset: 0;
  width: 33.33%;
  /* 4 tabs */

  background: var(--primary);
  background: linear-gradient(135deg, var(--primary), var(--primary-soft));
  background: linear-gradient(135deg, #f6e27a, var(--accent-1), #b8962e);
  background: var(--accent-1);
  transition: transform .35s ease;
  z-index: 0;
  margin: 5px;
  border-radius: 4px;
}

/* ===== Content ===== */
.tab-updates-content {
  /*    padding: 24px; */
  display: none;
}

.tab-updates-content h3 {
  font-size: 1.2rem;
  font-weight: 500;

}

.tab-updates-content .view-all-updates {
  background: #E9E9DD;
  font-size: 0.9rem;
  padding: 3px 6px;
  border-radius: 3px;
  border: 1px solid var(--primary);
  color: var(--primary);
}

.tab-updates-content.active {
  display: block;
}

/* ===== Mobile Accordion ===== */
.acc-btn {
  display: none;
}

.fc-event-content {
  padding: 0px 20px;
  background: var(--secondary);
}

.fc-event-content ul li {
  padding: 20px;
  margin: 5px 0px;
  /* background: var(--bg-color-white-2); */
  /* border-radius: 5px; */
  border-bottom: 1px solid var(--border-color-2);
}

.fc-event-content ul li a {
  color: var(--primary);
  font-size: 0.9rem;
}

.fc-event-content .inst-update-main {
  text-align: right;
}

.inst-update-main span {
  padding: 30px;
  font-size: 0.8rem;
  text-align: right;
}

.updates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin: 20px 12px 20px; */
  gap: 16px;
  padding: 15px 20px;
  background: var(--secondary);
}

.updates-title h2 {
  font-size: 1.5rem;
  margin: 0;
  color: var(--primary);
  font-weight: 500;
}

.updates-title p {
  margin: 6px 0 0;
  color: var(--primary);
  font-size: 15px;
}

.view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--primary), var(--primary-soft));
  color: var(--text-color-white-1-black);
  font-weight: 500;
  text-decoration: none;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
}

.view-all-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}

.update-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /* max-height: 500px;
   overflow-y: scroll;
   overflow-x: hidden; */
}

.update-list-inst-updates {
  max-height: 500px;
  overflow-y: scroll;
  overflow-x: hidden;
}

.update-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  background: var(--bg-card);
  border-radius: 4px;
  border: 1px solid var(--border-soft);
  transition: all 0.3s ease;
  margin-bottom: 15px;
}

.update-card .update-add-details {
  padding: 5px 0px;
}

.update-list::-webkit-scrollbar {
  width: 6px;
}

.update-list::-webkit-scrollbar-thumb {
  background: var(--primary-soft);
  border-radius: 4px;
}

.institute-update-card {
  align-items: start;
}

.update-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}

.update-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: var(--primary);
  flex-shrink: 0;
}

.institute-update-img {
  width: unset;
  height: unset;
}

.institute-update-img img {
  width: 200px;
  border-radius: 4px;
}

.update-content {
  flex: 1;
}

#update_section_tickerContainer {
  height: 500px;
  overflow-y: scroll;
  /* ✅ enable scroll */
  overflow-x: hidden;
  position: relative;
}

.update-content h3 a {
  color: var(--primary);
}

.update-content h3 a:hover {
  text-decoration: underline;
}

.update-content h3 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--text-dark);
  padding: 15px 0px;
}

.update-content p {
  margin: 6px 0 10px;
  font-size: 14px;
  color: var(--text-muted);
}

.update-meta {
  display: flex;
  gap: 24px;
  font-size: 0.8rem;
  color: var(--primary);
  align-items: center;
  border-top: 1px solid var(--border-color-2);
  padding: 10px 0px;
}

.update-meta i {
  margin-right: 6px;
  color: var(--primary);
}

.details-link-update {
  text-decoration: underline;
  color: var(--primary);
}

.update-add-details {
  /*  border-top: 1px solid var(--border-color-2); */
  padding: 15px 10px;
}

.latest-update-tag {
  font-size: 0.8rem;
  color: var(--accent-1);

  color: var(--text);
  padding: 2px 8px;
  border-radius: 3px;
  background: var(--bg-accent-green-1);
  border: 1px solid var(--accent-3);
}

/* ===== Mobile Styles ===== */
@media(max-width:768px) {

  .tab-header {
    display: none;
  }

  .acc-btn {
    display: flex;
    width: 100%;
    padding: 16px;
    background: var(--secondary);
    color: var(--primary);
    border: none;
    font-size: 0.9rem;
    cursor: pointer;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-color-1);
  }

  .acc-btn i {
    transition: transform .3s ease;
  }

  .acc-btn.active {
    background-color: var(--primary);
    color: var(--secondary);
  }

  .acc-btn.active i {
    transform: rotate(180deg);
  }

  .tab-updates-content {
    display: block;
    max-height: 0;
    overflow: hidden;
    padding: 0px;
    transition: max-height .4s ease;
  }

  .tab-updates-content.active {
    max-height: 600px;
    padding: 0px;
  }

  .tab-updates-content h3 {
    font-size: 0.8rem;
  }

  .institute-update-card {
    flex-direction: column;
    align-items: center;
  }
}

@media(max-width:700px) {
  .updates-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 5px 10px;
  }
}

@media(max-width:480px) {
  .updatestabs-wrapper {
    margin: 0px auto;
  }

  .updates-container {
    padding: 10px;
  }

  .updates-title h2 {
    font-size: 1.2rem;
  }

  .view-all-btn {
    font-size: 0.7rem;
    padding: 8px 11px;
  }

  .tab-updates-content.active {
    padding: 0px;
  }

  .fc-event-content {
    padding: 5px;
  }

  .fc-event-content ul li {
    padding: 5px;
  }

  .fc-event-content ul li a {
    font-size: 0.75rem;
  }

  .inst-update-main span {

    font-size: 0.7rem;
    text-align: right;
  }
}