/* =======================
   VARIABLES & BASE STYLES
========================== */

:root {
    --bg-dark: #000000d4;
    --border-color: #ccc;
    --hover-bg: #f0f0f0;
    --light-cyan: #e0f7fa;
    --accent: #003366;
    --text-light: #fbfbfb;
    --font-default: Arial, Helvetica, sans-serif;
  }
  
  body {
    font-family: var(--font-default);
  }
  
  /* =======================
     SEARCH CONTAINER - RESPONSIVE
  ========================== */
  
  .search-container {
    width: 100%;
    margin: 0 auto 30px;
    padding: 20px;
    position: relative;
    background-color: var(--bg-dark);
    border-radius: 12px;
    box-sizing: border-box;
  }

  
  
  .search {
    top: 2rem;
    position: sticky;
    z-index: 998;
  }
  
  /* TABLET: 700px+ - Match grid width */
  @media (min-width: 700px) {
    .search-container {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        padding: 30px;
        box-sizing: border-box;
    }
  }

  /* DESKTOP: 1000px+ - Match grid width */
  @media (min-width: 1000px) {
    .search-container {
        max-width: 95%;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
        padding: 30px 40px 30px 40px;
        box-sizing: border-box;
    }
  }
  
  .first-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
  }

  /* TABLET: Stack search inputs */
  @media (min-width: 700px) {
    .first-row {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }
  }

  /* DESKTOP: Horizontal search bar with filter icon and count on right */
  @media (min-width: 1000px) {
    .first-row {
        display: flex;
        flex-direction: row;
        gap: 15px;
        width: 100%;
        align-items: center;
        margin-bottom: 20px;
    }

    /* Search input - takes most space */
    #partner-match-search,
    #training-search,
    #case-study-search {
        flex: 1;
        min-width: 0;
    }

    /* Filter button - fixed width, no label text on desktop */
    #open-filters-btn {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
    }

    /* Match count - fixed width */
    #partner-count,
    #training-search-count,
    #case-count {
        flex-shrink: 0;
        white-space: nowrap;
    }
  }

  /* Filters row - display filters horizontally below search bar */
  .filters-row {
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 100%;
    color: #3c3c3c;
  }

  @media (min-width: 1000px) {
    .filters-row {
        display: flex;
        flex-direction: row;
        gap: 15px;
        width: 100%;
    }

    /* Each filter wrapper takes equal space */
    #tag-filter-wrapper,
    #method-filter-wrapper,
    #type-filter-wrapper {
        flex: 1;
        min-width: 0;
    }

    /* On pages without type filter, split equally between tag and method */
    #tag-filter-wrapper:only-of-type,
    #method-filter-wrapper:only-of-type {
        flex: 1;
    }
  }

  /* Search input responsive styles */
  #partner-match-search,
  #training-search,
  #case-study-search {
    width: 100%;
    padding: 12px 15px;
    font-size: 1rem;
    border: 1px solid #ddd;
    border-radius: 6px;
    background-color: #fff;
    box-sizing: border-box;
    font-family: var(--font-default);
  }

  #partner-match-search:focus,
  #training-search:focus,
  #case-study-search:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.1);
  }

  @media (min-width: 700px) {
    #partner-match-search,
    #training-search,
    #case-study-search {
        width: 100%;
    }
  }

  .multi-select {
    flex: 1;
    width: 100%;
  }

  @media (min-width: 1000px) {
    .multi-select {
        flex: 0 1 auto;
        width: 100%;
    }
  }

  /* Filter button and toggle styles */
  #toggle-search-container {
    width: 100%;
    padding: 12px 20px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    transition: background-color 0.2s;
  }

  #toggle-search-container:hover {
    background-color: #003366;
  }

  #open-filters-btn {
    padding: 10px 16px;
    background-color: var(--accent);
    color: white;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s;
    white-space: nowrap;
  }

  #open-filters-btn:hover {
    background-color: #003366;
  }

  @media (min-width: 1000px) {
    #toggle-search-container {
        display: none;
    }
  }

  .search-container.collapsed {
    max-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .search-container.collapsed #toggle-search-container {
    display: block;
  }

  /* Filter results styling */
  .selected-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #555;
  }

  .selected-filter {
    background-color: #444;
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .selected-filter button {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0;
    line-height: 1;
  }

  .selected-filter button:hover {
    opacity: 0.8;
  }

  
  /* =======================
     INPUTS & SELECTS
  ========================== */
  
  input[type="text"],
  select {
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid #ddd;
    font-family: var(--font-default);
    background-color: #fff;
    font-size: 0.95rem;
    flex: 1;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
  }
  
  input[type="text"]:hover,
  input[type="text"]:focus,
  select:hover,
  select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.1);
    outline: none;
  }
  
  select {
    background-color: #fff;
    color: #333;
    font-weight: 400;
    cursor: pointer;
  }
  
  /* =======================
     COUNTS
  ========================== */
  
  #partner-count,
  #training-search-count,
  #case-count {
            color: var(--text-light);

    font-weight: 500;
    text-wrap: nowrap;
    font-size: 0.9rem;
  }
  
  /* =======================
     CUSTOM SELECTS
  ========================== */
  
  .custom-select-wrapper,
  .multi-select {
    position: relative;
    display: flex;
    width: 100%;
  }

  @media (min-width: 1000px) {
    .custom-select-wrapper,
    .multi-select {
        position: relative;
        display: block;
        width: 100%;
    }
  }
  
  .custom-select,
  .multi-select {
    position: relative;
    padding: 0;
    font-size: 0.9rem;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 400;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
  }

  .custom-select:hover,
  .multi-select:hover {
    border-color: #ccc;
    background: #fff;
  }

  .custom-select:hover .custom-select-trigger,
  .multi-select:hover .multi-select-trigger {
    color: #2c2c2c;
  }

  .custom-select:focus,
  .multi-select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 121, 107, 0.1);
    outline: none;
  }
  
  .custom-select-trigger,
  .multi-select-trigger {
    display: flex;
    align-items: center;
    position: relative;
    padding: 12px 30px 12px 14px;
    user-select: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    flex: 1;
    font-weight: 400;
    font-size: 0.95rem;
    line-height: 1.4;
    color: #3c3c3c;
    transition: all 0.2s ease;
  }
  
  .custom-select-trigger::after,
  .multi-select-trigger::after {
    content: "▼";
    position: absolute;
    right: 8px;
    font-size: 0.7rem;
    pointer-events: none;
    flex-shrink: 0;
    color: #888;
    font-weight: 400;
    transition: transform 0.3s ease;
  }

  .custom-select.open .custom-select-trigger::after,
  .custom-select.active .custom-select-trigger::after,
  .multi-select.open .multi-select-trigger::after {
    transform: rotate(180deg);
  }
  
  .custom-select.open .custom-options,
  .custom-select.active .custom-options,
  .multi-select.open .multi-select-options {
    visibility: visible;
    opacity: 1;
  }
  
  /* Options List */
  .custom-options,
  .multi-select-options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--text-light);
    border: 1px solid var(--border-color);
    border-top: none;
    box-sizing: border-box;
    max-height: 200px;
    overflow-y: auto;
    scroll-behavior: smooth;
    z-index: 1000;
    visibility: hidden;
    opacity: 0;
    display: grid;
  }
  
  .custom-option,
  .multi-select-option {
    padding: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
  }
  
  .custom-option input,
  .multi-select-option input {
    margin-right: 10px;
  }
  
  .custom-option:hover,
  .multi-select-option:hover,
  .custom-options label:hover,
  .multi-select-options label:hover {
    background-color: var(--hover-bg);
  }
  
  /* =======================
     CHECKBOXES & FILTERS
  ========================== */
  
  .tag-checkbox,
  .method-checkbox,
  #tag-filter label,
  #method-filter label,
  #type-filter label {
    display: flex;
    align-items: center;
    margin: 2px 0;
    padding: 5px;
  }
  
  input[type="checkbox"] {
    transform: scale(1.2);
    margin-right: 8px;
  }
  
  input[type="checkbox"]:checked {
    background-color: var(--accent);
  }
  
  .tag-checkbox.selected,
  .method-checkbox.selected {
    font-weight: bold;
    background-color: var(--light-cyan);
    border-radius: 5px;
    padding: 5px;
  }
  
  /* =======================
     SELECTED FILTERS
  ========================== */
  
  .selected-tags-container {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    color: white;
    margin-top: 2rem;
  }
  
  .selected-filter {
    background-color: var(--accent);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
  }
  
  .selected-filter button {
    margin-left: 5px;
    border: none;
    background: none;
    color: white;
    font-weight: bold;
    cursor: pointer;
  }
  
  .selected-filter button:hover {
    color: #929292;
  }
  
  /* =======================
     MODAL & BUTTONS
  ========================== */
  
  #open-filters-btn,
  #remove-all-filters-btn {
    border-radius: 5px;
    color: white;
    font-family: 'Inter';
    background-color: #000000e5;
  }

  /* Filter Icon Button Styling */
  #open-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: 1px solid #ffffff4d;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  #open-filters-btn:hover {
    background-color: #333333e5;
    border-color: #ffffff;
  }

  #open-filters-btn:active {
    background-color: #555555e5;
  }

  .filter-icon {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    color: white;
  }

  /* Clear/Trash Icon Button Styling */
  #remove-all-filters-btn.clear-filters-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: auto;
    padding: 8px 12px;
    border: 1px solid #ffffff4d;
    cursor: pointer;
    transition: all 0.3s ease;
    background-color: #000;
    margin-left: auto;
  }

  #remove-all-filters-btn.clear-filters-btn:hover {
    background-color: #000;
    border-color: #ffffff;
  }

  #remove-all-filters-btn.clear-filters-btn:active {
    background-color: #000;
  }

  .trash-icon {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    color: #c71e1e;
  }

  @media (max-width: 768px) {
    #open-filters-btn {
      width: 40px;
      height: 40px;
    }

    .filter-icon {
      width: 20px;
      height: 20px;
    }

    #remove-all-filters-btn.clear-filters-btn {
      padding: 6px 10px;
    }

    .trash-icon {
      width: 16px;
      height: 16px;
    }
  }
  
  #filter-modal {
    display: none;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
   
    max-width: 1440px;
    margin-top: 2rem;
    max-height: 100%;
    overflow: auto;
    background-color: #0000003b;
    border: 1px solid black;
    border-radius: 5px 0 0 5px;
  }
  
  .filter-modal-content {
    width: 80%;
    margin: 2rem auto;
  }
  
  #close-filters-modal {
    margin-right: 1rem;
  }
  
  /* =======================
     RESPONSIVE
  ========================== */
  
  /* Mobile: Keep existing responsive rules from the top of file */
  
    .first-row {
      flex-wrap: wrap;
      gap: 10px;
    }
  
    #partner-count,
    #training-search-count,
    #case-count {
      font-size: 0.9rem;
    }
  
  
  @media (max-width: 768px) {
    .search-container {
      position: relative;
      top: auto;
      display: none;
      padding: 1rem;
      margin: 0.5rem auto;

      gap: 10px;
      flex-direction: column;
    }
   
    .search-container.mobile-visible {
      display: flex;
      position: relative;
      top: auto;
    }
  
    #open-filters-btn {
      width: 100%;
      padding: 10px;
      font-size: 14px;
    }
    
    #toggle-search-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      padding: 1rem;
      margin-bottom: 1rem;
      margin-left: auto;
      margin-right: auto;
      max-width: 95%;
      background-color: var(--bg-dark);
      border-radius: 4px;
      font-weight: 800;
      color: #fff;
      border: 1px solid #000;
    }
  
    .first-row {
      flex-direction: column;
      align-items: stretch;
      gap: 10px;
      width: 100%;
    }
  
    input[type="text"],
    select {
      width: 100%;
      padding: 8px;
      font-size: 14px;
      box-sizing: border-box;
    }
  
    .custom-select-wrapper {
      width: 100%;
    }
  
    .custom-select,
    .multi-select {
      width: 100%;
      box-sizing: border-box;
    }
  
    #search-filter-wrapper {
      display: none;
      width: 100%;
    }
  
    #search-filter-wrapper.show {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 100%;
    }
  
    #toggle-search-bar {
      display: inline-block;
      margin-bottom: 1rem;
    }
  
    .selected-tags-container {
      flex-direction: column;
      gap: 8px;
    }
  
    #partner-count,
    #training-search-count,
    #case-count {
      font-size: 0.85rem;
    }
  }
  
  @media (max-width: 480px) {
    .search-container {
      padding: 0.75rem;
  
    }
  
    #toggle-search-container {
      padding: 0.75rem;
      margin: 0.5rem auto;
      max-width: calc(100% - 1rem);
    }
  
    input[type="text"],
    select {
      font-size: 16px;
      padding: 10px;
    }
  
    #open-filters-btn {
      width: 100%;
    }
  }
  
  @media (min-width: 769px) {
    #toggle-search-container,
    #toggle-search-bar {
      display: none;
    }
  }
  
  .search-filter-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
  }