/*
 * Tab Filter T1 — used inside [pdh_grid_t1] when show_tabs=true.
 * Design source: Figma 407:41761 (desktop) + 407:42363 (mobile).
 */

.iw-tab-filter-t2 {
  display: flex;
  align-items: center;
  justify-content: flex-start;   /* LEFT default per Figma 407:41760 */
  flex-wrap: wrap;
  gap: 12px;
  padding: 0;
  width: 100%;
  font-family: inherit;
}

.iw-tab-filter-t2--center { justify-content: center; }
.iw-tab-filter-t2--right  { justify-content: flex-end; }

/* Higher specificity + explicit resets to override Flatsome button defaults
   (text-transform: uppercase, letter-spacing, padding, min-height, etc.). */
.iw-tab-filter-t2 .iw-tab-filter-t2__tab {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  min-height: 0;
  border: 1.5px solid #e7e7e7;
  border-radius: 999px;
  background: #ffffff;
  color: #606060;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  font-family: inherit;
  text-transform: none;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s, box-shadow 0.12s;
}

.iw-tab-filter-t2 .iw-tab-filter-t2__tab:hover {
  border-color: var(--iw-accent, #4564ed);
  color: var(--iw-accent, #4564ed);
}

.iw-tab-filter-t2 .iw-tab-filter-t2__tab:focus,
.iw-tab-filter-t2 .iw-tab-filter-t2__tab:focus-visible {
  outline: none;
  /* color-mix mở rộng accent thành ring 18% — modern browsers (Chrome 111+,
     Safari 16.2+, Firefox 113+, all 2023). Fallback rgba T1. */
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--iw-accent, #4564ed) 18%, transparent);
}

.iw-tab-filter-t2 .iw-tab-filter-t2__tab--active {
  background: var(--iw-accent-soft, #f0f3fe);
  border-color: var(--iw-accent, #4564ed);
  color: #606060;
}

@media (max-width: 991px) {
  /* Tab filter — horizontal scroll: first tab cách lề 16px, sát mép phải
     (Figma 407:42536). Pattern: container padding 0, first child margin-left
     16px + scroll-padding-left 16px. Đồng nhất với pdh-grid + features-row. */
  .iw-tab-filter-t2 {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    gap: 8px;
    margin: 0;
    padding: 0;
    scroll-padding-left: 16px;
    scrollbar-width: none;
  }
  .iw-tab-filter-t2::-webkit-scrollbar { display: none; }
  .iw-tab-filter-t2__tab {
    padding: 8px 12px;
    flex-shrink: 0;
  }
}

@media (max-width: 540px) {
  .iw-tab-filter-t2 > .iw-tab-filter-t2__tab:first-child {
    margin-left: 16px;
  }
  .iw-tab-filter-t2 > .iw-tab-filter-t2__tab:last-child {
    margin-right: 16px;
  }
}