/* =========================================== */
/* Mobile Styling */
/* =========================================== */
@media only screen and (max-width: 768px) {
  .t2m_content {
    display: block !important;
    gap: unset !important;
  }

  .t2m_filter {
    width: 100% !important;
  }

  #t2m-job {
    width: 100% !important;
  }
}

/* =========================================== */
/* General Styling */
/* =========================================== */
.t2m_filter {
  width: 25%;
}

#t2m-job {
  width: 75%;
}

.t2m_content {
  display: flex;
  gap: 20px;
}

/* =========================================== */
/* Filter CSS */
/* =========================================== */

/* General Styles for Filter Categories */
.filter_category {
  padding: 5px 10px;
  display: block;
  width: 100%;
  position: relative; /* Important for chevron positioning */
  color: var(--t2m-filter-text-color);
  font-weight: bold;
}

/* Container for filter groups */
.filter_group {
  border: var(--t2m-filter-border);
  border-radius: var(--t2m-filter-border-radius);
  margin-bottom: 20px;
}

/* Chevron Arrow Styles */
.filter_toggle .chevron-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-135deg);
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 4px solid var(--t2m-filter-text-color);
  border-bottom: 4px solid var(--t2m-filter-text-color);
  transition: transform 0.3s ease;
}

/* Rotate chevron when open */
.filter_toggle.open .chevron-arrow {
  transform: translateY(-50%) rotate(-315deg); /* Rotates to up chevron */
}

/* Filter Options Styles */
.filter_options {
  display: block;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease; /* Smooth transition */
  padding: 0; /* Reset padding for hidden state */
}

/* Label styles inside filter options */
.filter_options label {
  padding: 10px;
}

/* For screens larger than 768px (desktop) */
@media (min-width: 768px) {
  .chevron-arrow {
    display: none; /* Hide the chevron arrow on desktop */
  }
}

/* For screens smaller than 768px (mobile) */
@media (max-width: 767px) {
  .chevron-arrow {
    display: inline; /* Show the chevron arrow on mobile */
  }

  .filter_options {
    display: none; /* Hide options by default */
    max-height: 0; /* Ensure options are not visible */
    overflow: hidden; /* Hide overflow */
  }

  /* Show options when open */
  .filter_options.open {
    display: block;
    max-height: 500px; /* Adjust this height according to content */
  }
}