.tab_search { display: flex; align-items: center; gap: 1rem; max-width: calc(100% - 40rem); width: 100%; }
.free_search { position: relative; max-width: 46rem; width: 100%; }
.search_box_container { width: 100%; position: relative; font-size: 1.7rem; font-weight: 500; color: var(--color-black); }
.search_box { background: #f2f2f2; border-radius: 100rem; border: 1px solid var(--color-dark-01); display: flex; align-items: center; width: 4.8rem; height: 4.8rem; transition: all 0.2s ease; overflow: hidden; cursor: default; }
.search_box.active { width: 100%; height: auto; background: var(--color-white); }
.search_input_box { flex: 1; display: none; }
.search_box.active .search_input_box { display: block; }
.search_input_box input { width: 100%; border: none; font-size: 1.6rem; background: transparent; outline: none; padding: 1rem 2rem; }
.search_input_box input:focus-visible { outline: none; outline-offset: none; box-shadow: none; }

.srch_icon { cursor: pointer; max-width: 4.8rem; min-width: 4.8rem; min-height: 4.8rem; background: var(--color-dark); border-radius: 50%; }
.srch_icon svg { max-width: 2.4rem; }
.search_box_body { position: absolute; top: calc(100% + 0.5rem); left: 0; width: 100%; background: var(--color-white); max-height: 0; overflow: hidden; border-radius: 1.2rem; transition: max-height 0.2s ease; z-index: 10; }
.search_box_body.open { max-height: 400px; border: 1px solid var(--color-dark-01); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); }
.search_result { max-height: 32rem; overflow-y: auto; }
.search_result ul { list-style: none; margin: 0; padding: 0; }
.search_result li a { display: block; padding: 1rem 2rem; color: var(--color-black); text-decoration: none; border-bottom: 1px solid var(--color-dark-01); font-size: 1.7rem; line-height: normal; }
.search_result li a:hover { background-color: var(--color-extra-lite); }
.no_results_message { padding: 1rem 2rem; opacity: 0.5; font-size: 1.6rem; line-height: normal; margin: 0.5rem 0; }

@media screen and (max-width: 989px) {
  .tab_search { max-width: fit-content; width: 100%; }
  .search_result li a { padding: 0.6rem 2rem; font-size: 1.4rem; }
  .no_results_message { font-size: 1.4rem; }
  .search_box { width: 4rem; height: 4rem; }
  .srch_icon { min-width: 4rem; min-height: 4rem; }
  .srch_icon svg { width: 1.6rem; height: 1.6rem; }
  .search_input_box input { font-size: 1.4rem; }
}

@media screen and (max-width: 749px) { }

.country_reason_selectors {
  .section_head {  margin: 2rem 0 5rem; }
  .section_head .title_1 { font-size: 5.2rem; }
  .section_label { margin: 0; }
  .title_1 { margin: 1.5rem 0 2rem; }
  .title_1_dis { letter-spacing: -0.5px; }
  .tabs_head { display: flex; justify-content: space-between; margin: 0 0 2rem; gap: 1rem; }
  .collection-type-toggle { background: var(--color-extra-lite); border-radius: 2.4rem; padding: 0.4rem; display: inline-flex; gap: 1rem; }
  .toggle-button { cursor: pointer; background: transparent; border: none; font-size: 1.6rem; line-height: normal; padding: 1.1rem 2.6rem; border-radius: 2.4rem; color: #1E1E1E; letter-spacing: -0.02rem; }
  .toggle-button.active { background: #1E1E1E; color: var(--color-white); border: none; }
  .hidden { display: none; }
  .collection-list__item { transition: all 0.3s ease; }
  .view-more-wrapper { text-align:center; margin-top: 2rem; }
  .mob_content { display: none; }
  .web_tab_content { display: block; }
  
  .card .card__inner { max-width: 3rem; max-height: 3rem; aspect-ratio: 1; background: transparent; }
  .card__inner .card__media { border-radius: 50%; }
  .collection-list li { padding: 0.5rem; transition: none; }
  .card--standard>.card__content .card__information { padding: 0; display: flex; height: auto; align-items: end; }
  .card__information .icon-wrap svg { max-width: 2.5rem; width: 2.5rem; }
  .card__information .icon-wrap svg path { stroke: var(--color-dark); }
  .card__heading a { font-size: 1.8rem; line-height: normal; }
  .collection-list li .card-wrapper { padding: 1.8rem; border: 1px solid var(--color-dark); border-radius: 1.8rem; min-height: 13rem; }
  .card .icon-wrap { position: absolute; top: 2rem; right: 2rem; color: var(--color-dark); }
  .country_counts { font-weight: 500; color: #3E3E3E; }
  .card__inner .card__media .media img { max-width: 3rem; max-height: 3rem; transition: none; }
  
  @media screen and (max-width: 1120px) {
    .collection-list li .card-wrapper { min-height: 12rem; }
  }

  @media screen and (max-width: 989px) {
    .section_head .title_1 { font-size: 2.8rem; }
    .toggle-button { font-size: 1.4rem; }
    .card__heading a { font-size: 1.6rem; }
    .collection-list li { width: calc(32% - var(--grid-mobile-horizontal-spacing) / 2); }
    .collection-list li .card-wrapper { padding: 1.4rem; border-radius: 1.2rem; min-height: 10rem; }
    .card__information .icon-wrap svg { max-width: 2.5rem; width: 2.5rem; }
  }

  @media screen and (max-width: 749px) {
    .section_head .title_1 { font-size: 2.4rem; }
    .card .card__inner { max-width: 2.2rem; max-height: 2.2rem; }
    .card__heading a { font-size: 1.4rem; }
    .collection-list li .card-wrapper { min-height: 9rem; }
    .collection-list [data-type="region"] .card-wrapper { min-height: 10rem; }
    .card__information .icon-wrap svg { max-width: 2rem; width: 2rem; }
  }

  @media screen and (max-width: 480px) {
    .collection-list li { width: calc(50% - var(--grid-mobile-horizontal-spacing) / 2); }
    .on_mob_srch .collection-type-toggle { flex-direction: column; gap: 0rem; }
    .on_mob_srch { align-items: start; }
  }

  @media screen and (max-width: 749px) {
    .section_head { margin: 1.5rem 0 4rem; padding: 0 1.5rem; }
    .tab_search { gap: 1.5rem; }
    .tabs_head { flex-direction: column; gap: 2.5rem; padding: 0 1.5rem; }
    .mob_content { display: block; margin: 0; }
    .web_tab_content { display: none; }
    .tabs_head_r { display: flex; align-items: center; gap: 1rem; }
    .tabs_head_r .button { font-size: 1.4rem; min-height: 4.8rem; padding: 0 1.5rem; }  
  }
}

[data-theme="dark"] {
  .search_box { border-color: var(--color-grey_dark); background: var(--color-secondary_bg); }
  .search_box_body.open { border-color: var(--color-grey_dark); }
  .search_input_box input { color: var(--color-black); }
  .search_input_box input::placeholder { color: var(--color-placeholder_text); }
  .srch_icon svg path { stroke: var(--color-d_black); }
  .search_result { background: var(--color-grey_dark); }
  .search_result, .search_result li a { border-color: var(--color-border_neutral); }
  .search_result li a,
  .no_results_message { color: var(--color-b_secondary); opacity: 1; }
  .search_result li a:hover { background-color: var(--color-bg_surface_secondary); }

  .country_reason_selectors {
    .collection-type-toggle { background: var(--color-bg_surface_secondary); }
    .toggle-button { color: var(--color-placeholder_text); }
    .toggle-button.active { background: var(--color-grey_light); color: var(--color-black); }
    .collection-list li .card-wrapper { border-color: var(--color-grey_dark); background: var(--color-secondary_bg); }
    .card .card__inner { background: var(--color-d_white); border-radius: 50%; outline: 1px solid var(--color-b_secondary); }
    .card__heading a { color: var(--color-black); }
    .country_counts { color: var(--color-placeholder_text); }
    .card .icon-wrap { color: var(--color-b_secondary); }
    .card__information .icon-wrap svg path { stroke: #CCCCCC; }
    .view-more-button { background: var(--primary-link_btn_bg); color: var(--primary-link_btn_text); }
    .view-more-button:not([disabled]):hover:after { box-shadow: 0 0 0 2px var(--primary-link_btn_text); }
  }
}