/* ============================================================
   BLOG TABLE SORT — styles
   ============================================================ */

.bts-wrap {
  margin: 24px 0;
  font-family: 'DM Sans', 'DM Sans Fallback', -apple-system, sans-serif;
}

.bts-filter-input {
  width: 100%;
  max-width: 320px;
  padding: 10px 14px;
  border: 2px solid #E5E5E5;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95em;
  background: #FAFAF7;
  color: #0F1923;
  outline: none;
  margin-bottom: 12px;
  transition: border-color 0.15s, background 0.15s;
}

.bts-filter-input:focus {
  border-color: #C8A97E;
  background: #FFFFFF;
}

.bts-filter-input::placeholder {
  color: #9CA3AF;
}

.bts-table {
  width: 100%;
  border-collapse: collapse;
  background: #FFFFFF;
  font-size: 0.95em;
  -webkit-overflow-scrolling: touch;
}

.bts-table thead {
  background: #0F1923;
  color: #F5F0E6;
}

.bts-table th {
  padding: 12px 14px;
  text-align: left;
  font-family: 'DM Sans', sans-serif;
  font-weight: 600;
  font-size: 0.9em;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  border: none;
  position: relative;
  user-select: none;
}

.bts-table th.bts-sortable {
  cursor: pointer;
  transition: background 0.15s;
}

.bts-table th.bts-sortable:hover {
  background: #1A2638;
}

.bts-table th.bts-sortable:focus {
  outline: 2px solid #C8A97E;
  outline-offset: -2px;
}

.bts-sort-indicator {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
  color: #C8A97E;
}

.bts-table td {
  padding: 12px 14px;
  border-top: 1px solid #F0EBE0;
  color: #0F1923;
  vertical-align: middle;
}

.bts-table tbody tr {
  transition: background 0.1s;
}

.bts-table tbody tr:hover {
  background: #FAF6EC;
}

.bts-table tbody tr:nth-child(even) {
  background: #FAFAF7;
}

.bts-table tbody tr:nth-child(even):hover {
  background: #FAF6EC;
}

/* Mobile: scroll horizontal pra tabelas largas */
@media (max-width: 700px) {
  .bts-wrap {
    overflow-x: auto;
    margin: 24px -14px;
    padding: 0 14px;
  }
  .bts-table {
    font-size: 0.85em;
  }
  .bts-table th, .bts-table td {
    padding: 10px 8px;
    white-space: nowrap;
  }
}
