.page-indicates ul {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
}

.page-indicates ul li {
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 128.571%;
  letter-spacing: 0.16px;
}

.page-indicates ul li a {
  color: #0f62fe;
}

.search-main-content {
  max-width: 1236px;
  width: 100%;
}

.main-search-area {
  display: flex;
  gap: 56px;
  align-items: stretch;
  padding-block: 40px;
  background: #fefefe;
}

.search-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 26px;
  background: #f2f4f8;
  padding: 8px;
  padding-left: 24px;
}

.search-bar input {
  background: transparent;
  border: none;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 128.571%;
  letter-spacing: 0.16px;
  color: #161616;
  flex: 1;
}

.searchbar-header {
  margin-top: 24px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.searchbar-header .search-result {
  color: var(--text-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 142.857%;
  letter-spacing: 0.16px;
}

.searchbar-header select {
  background: #fff;
  border: none;
  color: var(--text-primary);
  padding-block: 15px;
  cursor: pointer;
  font-size: 14px;
}

.search-result-area {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.single-result-card {
  padding-bottom: 20px;
  padding-top: 20px;
  border-bottom: 1px solid #f4f4f4;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.result-content-box .text {
  color: var(--text-primary);
  text-align: justify;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  width: 100%;
  text-overflow: ellipsis;
  height: 64px;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
    line-height: 20px; /* 142.857% */
    letter-spacing: 0.16px;
  hyphens: auto;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  word-break: normal;
  overflow-wrap: break-word;
}

.result-content-box h4 {
  color: var(--text-primary);
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.result-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.time-category,
.time-category-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 128.571%;
  letter-spacing: 0.16px;
}

.search-tags a {
  display: inline-flex;
  padding: 3px 8px 5px 8px;
  flex-direction: column;
  align-items: center;
  color: var(--text-secondary);
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 133.333%;
  letter-spacing: 0.32px;
  border-radius: 12px;
}

.bg-cyan {
  background: #bae6ff;
}

.bg-red-20 {
  background: #ffd7d9;
}

.bg-green {
  background: #a7f0ba;
}

.result-content-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.search-tags {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: nowrap; /* Prevent wrapping by default */
}

.bg-teal {
  background: #9ef0f0;
}

.bg-purple-20 {
  background: #e8daff;
}

/* sitebar syle  */

.filter-sidebar {
  position: fixed;
  left: 0;
  top: 128px;
  z-index: 9998;
  padding-top: 55px;
  padding-inline: 20px;
  /*! height: calc(100dvh - 55px); */
  /*! overflow: hidden; */
  /*! overflow-y: auto; */
  background: #fff;
}

.sidebar-title {
  color: #161616;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 150%;
}

.sidebar-content {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
}

.filter-container {
  background-color: #ffffff;
  border-radius: 0.5rem;
  width: 226px;
}

.header-section {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
}

.header-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.clear-all-btn {
  font-size: 12px;
  color: #a8a8a8;
  font-weight: 400;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease-in-out;
  line-height: 16px;
  letter-spacing: 0.32px;
  display: none; /* Hidden by default, will be shown via media queries */
}

.clear-all-btn:hover {
  color: #1d4ed8;
}

.clear-all-btn.hidden {
  display: none;
}

.filter-section {
  padding-bottom: 16px;
}

.filter-toggle-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.filter-title-group {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
}

.filter-title-group .clear-section-btn {
  margin-left: auto;
}

.filter-title-group .clear-section-btn.hidden {
  display: none;
}

.filter-title-group .clear-section-btn.hidden + .arrow-icon {
  margin-left: auto;
}

.filter-title {
  color: var(--text-primary);
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  line-height: 142.857%;
  letter-spacing: 0.16px;
}

.arrow-icon {
  width: 1rem;
  height: 1rem;
  color: #161616;
  transition: transform 0.2s ease-in-out;
  cursor: pointer;
}

.filter-title-group .arrow-icon {
  margin-left: auto; /* Always push arrow to the right */
}

.arrow-icon.rotated {
  transform: rotate(-90deg);
}

.inner-arrow-icon.rotated {
  transform: rotate(90deg);
}

.clear-section-btn {
  font-size: 12px;
  color: #a8a8a8;
  font-weight: 400;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  transition: color 0.2s ease-in-out;
  line-height: 16px;
  letter-spacing: 0.32px;
  display: none; /* Hidden by default, will be shown via media queries */
}

.clear-section-btn:hover {
  color: #1d4ed8;
}

.clear-section-btn.hidden {
  display: none;
}

.filter-list {
  list-style: none;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.filter-list.visible-list {
  max-height: 100%;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  padding-top: 8px;
  padding-bottom: 12px;
}

.filter-item {
  display: flex;
  align-items: center;
  padding-top: 7px;
  padding-bottom: 7px;
  gap: 4px;
  line-height: 18px;
  transition: opacity 0.2s ease-in-out;
}

.filter-item-content {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-grow: 1;
}

.filter-checkbox {
  height: 1rem;
  width: 1rem;
  color: #2563eb;
  border-radius: 0.25rem;
  border: 1px solid #d1d5db;
  accent-color: #000;
  cursor: pointer;
}

.filter-label {
  color: #161616;
  cursor: pointer;
  font-size: 14px;
  line-height: 18px;
}

.sub-filter-list {
  list-style: none;
  padding-left: 20px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.sub-filter-list.visible-list {
  max-height: 100%;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-sub-filter-list {
  list-style: none;
  padding-left: 20px;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
}

.sub-sub-filter-list.visible-list {
  max-height: 100%;
  transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.sub-filter-label {
  color: #374151;
  cursor: pointer;
  font-size: 14px;
}

.show-all-section-btn {
  color: var(--Brand-Purple-60);
  font-size: 14px;
  font-weight: 400;
  margin-top: 0.5rem;
  background: none;
  border: none;
  transition: color 0.2s ease-in-out;
  display: block;
  width: fit-content;
  margin-left: 0;
  text-decoration: underline;
  line-height: 20px;
  letter-spacing: 0.16px;
}

.show-all-section-btn:hover {
  color: #1d4ed8;
}

.filter-sidebar {
  position: sticky;
  left: 0;
  top: 128px;
  z-index: 2;
  padding-top: 90px;
  padding-inline: 20px;
  background: #fff;
  -ms-overflow-style: none;
  /* IE and Edge */
  padding-left: 40px;
}

.filter-sidebar::-webkit-scrollbar {
  display: none;
}

.main-content-container {
  flex: 1;
  padding-right: 121px;
}

.filter-toggler button {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  font-size: 14px;
  padding: 10px;
}

.custom-select-wrapper {
  position: relative;
  width: 100%;
  /* Make it fluid */
  max-width: 250px;
  /* Max width for desktop */
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0 12px 16px;
  border: transparent;
  /* light gray */
  border-radius: 8px;
  cursor: pointer;
  background-color: transparent;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease-in-out;
  box-shadow: none;
  gap: 15px;
}

.custom-select-trigger:hover {
  border-color: #cbd5e1;
  /* slightly darker gray on hover */
}

.custom-select-trigger .arrow {
  transition: transform 0.2s ease-in-out;
}

.custom-select-trigger.open .arrow {
  transform: rotate(-180deg);
}

.custom-options {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  /* Position below the trigger with some gap */
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 10;
  overflow: hidden;
  /* Ensures rounded corners apply to content */
  min-width: 143px;
}

.custom-option {
  padding: 12px 16px;
  cursor: pointer;
  font-size: 14px;
  color: var(--text-secondary);
  transition: background-color 0.2s ease-in-out;
  display: flex;
  align-items: center;
  justify-content: space-between;
  white-space: nowrap;
  line-height: 142%;
  letter-spacing: 0.16px;
}

.custom-option:hover {
  background-color: #f7fafc;
  /* light hover background */
}

.custom-option.selected {
  background-color: #f0f2f5;
  /* selected background */
  font-weight: 400;
}

/* Checkmark icon for selected option */

.custom-option .checkmark {
  display: none;
  color: #161616;
  /* blue checkmark */
}

.custom-option.selected .checkmark {
  display: block;
}

.result-content-box h4 a:hover {
  text-decoration: underline;
}

.view-more-btn .action-btn {
  padding: 15px 40px;
  color: #fff;
  margin-top: 12px;
}

.view-more-btn .action-btn:hover {
  color: var(--Brand-Purple-60);
  text-decoration: none !important;
}

.close-sidebar-btn button {
  background: transparent;
  border: none;
}

.filter-item.era-filter-items {
  flex-direction: column;
  align-items: start;
}

.arrow-icon {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  user-select: none;
}

.filter-title-group .arrow-icon {
  transform: rotate(90deg);
}
.filter-title-group .arrow-icon.rotated {
  transform: rotate(-90deg);
}

.header-title-large {
  display: none;
}


@media screen and (min-width: 1920px) {
  .main-content-container {
    padding-right: 342px;
  }
}
.filter-checkbox,
.sub-filter-checkbox {
  display: none;
}

.filter-label,
.sub-filter-label {
  display: inline-flex;
  gap: 6px;
  cursor: pointer;
  user-select: none;
}

.checkbox-icon-desktop svg.checked-icon,
.checkbox-icon-desktop svg.unchecked-icon,
.checkbox-icon-mobile svg.checked-icon,
.checkbox-icon-mobile svg.unchecked-icon {
  display: none;
}

.hidden,
.header-title-large {
  display: none;
}

.no-results-block {
  padding-top: 24px;
  padding-bottom: 40px;
}

.no-results-block svg {
  width: 50px;
  height: 50px;
}

.no-results-block h2 {
  color: var(--text-primary, #161616);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px; /* 150% */
  padding-top: 20px;
  padding-bottom: 16px;
}

.no-results-block p,
.no-results-block button {
  color: var(--text-secondary, #525252);
  text-align: center;
  /* Body styles/body-01 */
  font-size: 14px;
  font-weight: 400;
  line-height: 20px; /* 142.857% */
  letter-spacing: 0.16px;
}
.no-results-block button {
  text-decoration-style: solid;
  text-underline-position: from-font;
}


.hero-category h2{
    color: var(--Brand-Purple-60);
  font-family: var(--literata-font);
  font-size: 34px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  margin: 0 auto;
  margin-bottom: 40px;
}

.time-category-footer {
  display: none;
  }


.shortby-menu {
  border-bottom: 1px solid #f4f4f4;
}

@media (min-width: 801px) {
  .hero-category h2{
    font-size: 48px;
    margin-bottom: 48px;
    margin-top: 24px;
  }
  .checkbox-icon-desktop {
    display: inline-block;
  }
  .checkbox-icon-mobile {
    display: none;
  }
  .filter-checkbox:not(:checked)
    + .filter-label
    .checkbox-icon-desktop
    svg.unchecked-icon {
    display: inline;
  }
  .filter-checkbox:checked
    + .filter-label
    .checkbox-icon-desktop
    svg.checked-icon {
    display: inline;
  }
  .filter-checkbox:not(:checked)
    + .sub-filter-label
    .checkbox-icon-desktop
    svg.unchecked-icon {
    display: inline;
  }
  .filter-checkbox:checked
    + .sub-filter-label
    .checkbox-icon-desktop
    svg.checked-icon {
    display: inline;
  }
  .filter-mobile-display,
  .shortby-menu,
  .time-category {
    display: none;
  }
  .time-category-footer {
    display: flex;
  }
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
  /*========= search page ======= */

  .main-search-area {
    gap: 0;
  }

  .filter-sidebar {
    position: fixed;
    left: -100%;
    top: 126px;
    transition: 0.3s;
    padding: 20px;
    height: calc(100% - 126px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
  
  .main-content-container {
    flex: 1;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  
  /* Ensure HTMX-loaded content maintains proper spacing */
  .main-content-container #search-results {
    padding-right: 0; /* No additional padding to avoid double padding */
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure specific content within main-content-container stays within bounds */
  .main-content-container .single-result-card,
  .main-content-container .result-content-box,
  .main-content-container .search-bar,
  .main-content-container .search-bar input,
  .main-content-container .search-tags,
  .main-content-container .tags-wrapper,
  .main-content-container .tags-box {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Specific constraints for search result elements */
  .main-content-container .single-result-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box .text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  /* Tag overflow handling for 801px-1024px screens */
  .search-tags {
    flex-wrap: nowrap; /* Prevent wrapping - let JS handle overflow */
    gap: 8px;
    overflow: visible; /* Allow tooltip to show */
  }
  
  /* Ensure tooltip appears above all other elements */
  .tags-tooltip {
    z-index: 10000 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  .search-tags .tags-wrapper {
    flex: 1;
    min-width: 0; /* Allow shrinking */
    overflow: visible; /* Allow tooltip to show */
    max-width: 100%; /* Ensure it doesn't exceed container */
  }
  
  .search-tags .tags-box {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible; /* Allow tooltip to show */
    gap: 16px; /* Match base.css gap */
  }
  
  .search-tags .tag {
    flex-shrink: 0; /* Prevent individual tags from shrinking */
    white-space: nowrap; /* Prevent text wrapping within tags */
  }
  
  /* Ensure tooltip parent containers don't constrain width */
  .more-tags {
    overflow: visible !important;
    position: relative !important;
  }

  .filter-sidebar.sidebar-active {
    left: 0;
  }

  .clear-all-btn.d-block {
    display: block !important;
  }
  
  .slidebar-action-btns {
    display: flex;
    align-items: center;
    padding-top: 9px;
    justify-content: space-between;
    width: 100%;
    gap: 24px;
  }
  
  .filter-container {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
    width: 236px;
  }
  
  .slidebar-action-btns button {
    padding: 13px 13.75px;
    border: 1px solid var(--Brand-Purple-60);
    border-radius: 100px;
    background: var(--Brand-Purple-60);
    color: #fff;
    font-size: 14px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 0.16px;
    min-width: 108px;
  }
  
  .slidebar-action-btns button.clear-all-btn {
    background: transparent;
    color: var(--Brand-Purple-60);
  }

  .shadow-active::before {
    content: "";
    clear: both;
    width: 100vw;
    height: 100dvh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: #000;
    opacity: 0.6;
    z-index: 1;
  }

  .shadow-active {
    height: 100dvh;
    overflow: hidden;
  }
}
/* Show clear buttons only on desktop (1024px and above) */
@media (min-width: 1025px) {
  .filter-toggler {
    display: none;
  }
  .slidebar-action-btns {
    display: none;
  }
  .header-title-medium,
  .close-sidebar-btn {
    display: none;
  }
  .clear-section-btn {
    display: block;
    font-size: 12px;
    color: #a8a8a8;
    font-weight: 400;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease-in-out;
    line-height: 16px;
    letter-spacing: 0.32px;
  }

  .clear-all-btn {
    display: block;
    font-size: 12px;
    color: #a8a8a8;
    font-weight: 400;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    transition: color 0.2s ease-in-out;
    line-height: 16px;
    letter-spacing: 0.32px;
  }

  /* Restore original arrow positioning for desktop */
  .filter-title-group .arrow-icon {
    margin-left: 0; /* Reset to original positioning */
  }

  .header-title-large {
    display: block;
  }
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .search-main-content {
    max-width: 100%;
    width: 100%;
  }
}

@media screen and (min-width: 1281px) and (max-width: 1440px) {
  .search-main-content {
    max-width: 816px;
    width: 100%;
  }

  .main-content-container {
    padding-right: 0;
  }
}

/* Fix for 800-850px range - smooth transition */
@media screen and (min-width: 800px) and (max-width: 850px) {
  .main-content-container {
    padding-left: 40px; /* Reduced padding for better fit */
    padding-right: 40px; /* Maintain some right padding for sidebar space */
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  
  /* Ensure HTMX-loaded content maintains proper spacing */
  .main-content-container #search-results {
    padding-right: 0; /* No additional padding to avoid double padding */
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure specific content within main-content-container stays within bounds */
  .main-content-container .single-result-card,
  .main-content-container .result-content-box,
  .main-content-container .search-bar,
  .main-content-container .search-bar input,
  .main-content-container .search-tags,
  .main-content-container .tags-wrapper,
  .main-content-container .tags-box {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Specific constraints for search result elements */
  .main-content-container .single-result-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box .text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .search-main-content {
    max-width: 100%;
  }
}



@media (max-width: 800px) {
  .no-results-block {
    padding-top: 48px;
  }
  .checkbox-icon-mobile {
    display: inline-block;
  }
  .checkbox-icon-desktop {
    display: none;
  }
  .filter-checkbox:not(:checked)
    + .filter-label
    .checkbox-icon-mobile
    svg.unchecked-icon {
    display: inline;
  }
  .filter-checkbox:checked
    + .filter-label
    .checkbox-icon-mobile
    svg.checked-icon {
    display: inline;
  }
  .filter-checkbox:not(:checked)
    + .sub-filter-label
    .checkbox-icon-mobile
    svg.unchecked-icon {
    display: inline;
  }
  .filter-checkbox:checked
    + .sub-filter-label
    .checkbox-icon-mobile
    svg.checked-icon {
    display: inline;
  }
  .slidebar-action-btns,
  .clear-all-btn {
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
    line-height: 18px; /* 128.571% */
    letter-spacing: 0.16px;
  }
  .filter-title-group {
    position: relative;
  }
  .filter-title-group .arrow-icon {
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(90deg) !important;
    margin-left: 0 !important;
  }
  .filter-title-group .arrow-icon.rotated {
    transform: translateY(-50%) rotate(-90deg) !important;
  }
  .filter-title-group .clear-section-btn {
    margin-right: 24px !important;
  }
  .filter-sidebar {
    position: fixed;
    left: -100%;
    top: 0;
    transition: 0.3s;
    padding-top: 20px;
    width: 100%;
    z-index: 999;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding-block: 25px;
  }
  .main-content-container {
    flex: 1;
    padding-left: 40px;
    padding-right: 40px;
    max-width: 100%;
    box-sizing: border-box;
    overflow-x: hidden; /* Prevent horizontal overflow */
  }
  
  /* Ensure HTMX-loaded content maintains proper spacing */
  .main-content-container #search-results {
    padding-right: 0; /* No additional padding to avoid double padding */
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Ensure specific content within main-content-container stays within bounds */
  .main-content-container .single-result-card,
  .main-content-container .result-content-box,
  .main-content-container .search-bar,
  .main-content-container .search-bar input,
  .main-content-container .search-tags,
  .main-content-container .tags-wrapper,
  .main-content-container .tags-box {
    max-width: 100%;
    box-sizing: border-box;
  }
  
  /* Specific constraints for search result elements */
  .main-content-container .single-result-card {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }
  
  .main-content-container .result-content-box .text {
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  .filter-sidebar.sidebar-active {
    left: 0;
  }

  .filter-list {
    max-height: 0;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .filter-list.hidden-list {
    max-height: 0;
    padding-top: 0;
    transition:
      max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
      padding-top 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .filter-section {
    padding-bottom: 22px;
    border-bottom: 1px solid #f4f4f4;
    margin-bottom: 0;
    padding-top: 22px;
  }
  .arrow-icon {
    width: 24px;
    height: 24px;
    color: var(--Brand-Purple-60);
    transform: rotate(90deg);
  }
  .clear-section-btn {
    display: none;
  }
  .filter-label {
    font-size: 16px;
    color: var(--Brand-Purple-60);
    flex: none !important;
  }
  .show-all-section-btn {
    margin: 0;
    font-size: 16px;
    text-decoration: underline;
  }

  .filter-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--Brand-Purple-60);
  }

  .header-section .clear-all-btn {
    display: none !important;
  }

  .filter-item-content .arrow-icon {
    transform: rotate(0deg);
    margin-left: 0;
    width: 18px;
    height: 18px;
  }

  .slidebar-action-btns {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 11px;
  }
  .slidebar-action-btns button {
    padding: 13px 16px;
    border: 1px solid var(--Brand-Purple-60);
    border-radius: 50px;
    background: var(--Brand-Purple-60);
    color: #fff;
    display: flex !important;
    min-width: 155px;
    align-items: center;
    justify-content: center;
  }
  .slidebar-action-btns button.clear-all-btn {
    background: #fff;
    color: var(--Brand-Purple-60);
  }

  .filter-container {
    flex: 1;
    max-height: 100%;
    overflow-y: auto;
    width: 100%;
  }
  .sub-filter-label {
    color: var(--Brand-Purple-60);
    cursor: pointer;
    font-size: 16px;
  }

  .close-sidebar-btn button {
    background: transparent;
    border: none;
    background: transparent;
  }
  .page-indicates ul {
    justify-content: center;
    margin-top: 15px;
  }

  .shortby-menu-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 22px;
    background-color: transparent;
    cursor: pointer;
    /* Adjust width as needed */
    width: 100%;
    gap: 16px;
  }

  .shortby-menu-button .icons svg {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Sort-by chevron rotation - same as filter chevrons */
  .shortby-menu-button .arrow-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: var(--Brand-Purple-60);
  }

  .shortby-menu-button .arrow-icon.rotated {
    transform: rotate(-90deg);
  }

  .shortby-menu-content {
    display: none;
    /* Match dropdown button width */
    border-bottom: 1px solid #f4f4f4;
    padding-bottom: 22px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin-top: -14px;
  }

  .shortby-menu-content label {
    color: var(--Brand-Purple-60);
    display: flex;
    align-items: center;
    padding: 8px 0;
    text-decoration: none;
    cursor: pointer;
    background-color: transparent;
    height: 48px;
  }

  .shortby-menu-content label:hover {
    background-color: transparent;
  }

  .shortby-menu-content label:has(input[type="radio"]:checked) {
    background-color: transparent;
  }

  .shortby-menu-content input[type="radio"] {
    margin-right: 8px;
    /* Style the radio button */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border: 1px solid var(--Brand-Purple-60);
    border-radius: 50%;
    outline: none;
    cursor: pointer;
  }

  .shortby-menu-content input[type="radio"]:checked::before {
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--Brand-Purple-60);
    margin: 3px;
  }

  .shortby-menu.open .shortby-menu-content {
    display: block;
  }
  .shortby-menu-button h4 {
    font-size: 16px;
    color: var(--Brand-Purple-60);
  }

  .shortby-menu-button span {
    color: var(--Brand-Purple-60);
    font-size: 16px;
  }
  .filter-toggler button span {
    display: none;
  }
  .short-result {
    display: none;
  }

  .header-title {
    margin-inline: auto;
    color: var(--Brand-Purple-60);
  }

  .header-section {
    position: sticky;
    top: 0;
    z-index: 55;
    background: #fff;
  }
  .result-footer {
    flex-wrap: wrap;
    align-items: start;
  }

  .main-search-area {
    padding-block: 20px;
    gap: 0;
  }

  .single-result-card {
    padding-top: 28px;
    padding-bottom: 34px;
  }
  .search-result-area {
    gap: 28px;
  }
  .page-indicates {
    display: none;
  }
  .searchbar-header {
    margin-bottom: 28px;
  }

  /*========= book page ========= */

  .timeline-main {
    padding-top: 20px;
  }

  .mobile-search-pop.active-pop {
    left: 0;
  }

  .search-button-s {
    display: none !important;
  }

  .search-bar {
    padding: 15px;
    padding-left: 24px;
    border-radius: 8px;
  }
  .search-bar input {
    font-size: 16px;
    line-height: 18px;
  }
  .result-content-box .text {
    font-size: 16px;
    line-height: 24px;
    height: 105px;
        color: var(--text-primary);
    align-self: stretch;
    text-align: justify;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 400;
    letter-spacing: 0.16px;
  }
  .searchbar-header .search-result {
    font-size: 16px;
    line-height: 24px;
  }
  .filter-toggler svg {
    width: 24px;
    height: 24px;
  }
  .filter-toggler svg path {
    fill: var(--Brand-Purple-60);
  }
  .filter-item {
    padding-top: 13px;
    padding-bottom: 13px;
    transition:
      opacity 0.3s ease-in-out,
      padding 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .show-all-section-btn {
    padding: 10px 0px;
  }

  .arrow-icon path {
    stroke-width: 1.4;
  }

  .search-tags a {
    padding: 4px 12px 6px 12px;
    font-size: 14px;
    line-height: 16px;
    border-radius: 103px;
  }

  .social-media li a {
    display: flex;
    padding: 10px 6px;
  }
  .social-media.d-flex {
    flex-direction: column;
    align-items: center;
  }
  .social-media span {
    height: 32px;
    font-size: 16px;
  }

  .filter-item-content .arrow-icon.rotated,
  .surface-icon.rotated {
    transform: rotate(90deg);
  }
  .filter-item-content .arrow-icon path {
    fill: var(--Brand-Purple-60);
  }

  /* Mobile filter display styling - matches shortby-menu-button */
  .filter-mobile-display {
    display: none; /* Hidden by default */
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    cursor: pointer;
    width: 100%;
    gap: 16px;
  }

  .filter-mobile-display .icons svg {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .filter-mobile-display .arrow-icon {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    stroke: var(--Brand-Purple-60);
  }

  .filter-mobile-display .arrow-icon.rotated {
    transform: rotate(-90deg);
  }

  .filter-selected-text {
    color: var(--Brand-Purple-60);
    font-size: 16px;
  }

  /* Mobile filter display h4 styling - matches shortby-menu-button h4 */
  .filter-mobile-display h4 {
    font-size: 16px;
    color: var(--Brand-Purple-60);
    margin: 0;
  }

  /* Hide desktop filter title group on small screens */
  @media screen and (max-width: 1024px) {
    .filter-title-group {
      display: none;
    }

    .filter-mobile-display {
      display: flex;
    }

    /* Ensure filter toggle header has proper spacing */
    .filter-toggle-header {
      padding-bottom: 0;
    }

    /* Hide clear buttons on screens below 1024px */
    .clear-section-btn {
      display: none !important;
    }

    .header-section .clear-all-btn {
      display: none !important;
    }

    .filter-title-group .clear-section-btn {
      display: none !important;
    }

    /* Override any other clear button rules */
    button.clear-section-btn {
      display: none !important;
    }
    .filter-label {
      flex-grow: auto !important;
    }

    /* Simple mobile outline removal */
    .filter-item,
    .filter-list li {
      outline: none !important;
    }

    .filter-item:focus,
    .filter-list li:focus {
      outline: none !important;
    }
    .filter-title-group {
      position: relative;
    }

    .filter-title-group .arrow-icon {
      position: absolute !important;
      right: 0 !important;
      top: 50% !important;
      transform: translateY(-50%) rotate(90deg) !important;
      margin-left: auto !important; /* Ensure arrow stays on the right */
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .filter-title-group .arrow-icon.rotated {
      transform: translateY(-50%) rotate(-90deg) !important;
    }

    .filter-title-group .clear-section-btn {
      margin-right: 24px !important;
    }

    /* Sort-by chevron mobile behavior - same as filter chevrons */
    .shortby-menu-button .arrow-icon {
      transform: rotate(90deg) !important;
      transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    .shortby-menu-button .arrow-icon.rotated {
      transform: rotate(-90deg) !important;
    }
  }

  /* Show desktop filter title group on larger screens */
  @media screen and (min-width: 1024px) {
    .filter-mobile-display {
      display: none;
    }

    .filter-title-group {
      display: flex;
    }

    /* Show clear buttons only on desktop (1024px and above) */
    .clear-section-btn {
      display: block;
    }

    .header-section .clear-all-btn {
      display: block !important;
    }
  }
  
  /* Tag overflow handling for max-width: 800px screens */
  .search-tags {
    flex-wrap: nowrap; /* Prevent wrapping - let JS handle overflow */
    gap: 8px;
    overflow: visible; /* Allow tooltip to show */
  }
  
  /* Ensure tooltip appears above all other elements */
  .tags-tooltip {
    z-index: 10000 !important;
    width: auto !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
  }
  
  .search-tags .tags-wrapper {
    flex: 1;
    min-width: 0; /* Allow shrinking */
    overflow: visible; /* Allow tooltip to show */
    max-width: 100%; /* Ensure it doesn't exceed container */
  }
  
  .search-tags .tags-box {
    display: flex;
    flex-wrap: nowrap;
    overflow: visible; /* Allow tooltip to show */
    gap: 16px; /* Match base.css gap */
  }
  
  .search-tags .tag {
    flex-shrink: 0; /* Prevent individual tags from shrinking */
    white-space: nowrap; /* Prevent text wrapping within tags */
  }
  
  /* Ensure tooltip parent containers don't constrain width */
  .more-tags {
    overflow: visible !important;
    position: relative !important;
  }
}

.action-btn {
  display: inline-flex;
}

.filter-container {
  border-radius: 0px;
}