/**
 * TexPrint Archive Filters — Hero style, listes déroulantes horizontales.
 * Tokens Elementor (Color Governance).
 */

.txp-af {
  --txp-af-primary: var(--c-primary, var(--e-global-color-primary, #1a365d));
  --txp-af-text: var(--c-text, var(--e-global-color-text, #0f172a));
  --txp-af-bg: var(--c-bg, #ffffff);
  --txp-af-border: var(--c-border, #e2e8f0);
  --txp-af-accent: var(--c-accent, var(--e-global-color-accent, #d97706));
}

.txp-af {
  width: 100%;
  padding: 1.5rem 1rem;
  margin-bottom: 1.5rem;
  background: var(--txp-af-bg);
  border: 1px solid var(--txp-af-border);
  border-radius: 8px;
}

.txp-af__form {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* PC uniquement : pas de fond, largeur adaptée au contenu */
@media (min-width: 1025px) {
  .txp-af {
    background: transparent;
    border: none;
    padding: 0 0 1rem;
    margin-bottom: 1rem;
  }

  .txp-af__form {
    width: fit-content;
    max-width: 100%;
    margin: 0;
  }

  .txp-af__row {
    width: fit-content;
  }
}

/* Force horizontal layout on all viewports — override Elementor/theme */
.txp-af__row {
  display: flex !important;
  flex-wrap: nowrap !important;
  flex-direction: row !important;
  align-items: flex-end;
  gap: 1rem;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  min-width: min-content; /* empêche le collapse, force scroll si étroit */
}

.txp-af__row::-webkit-scrollbar {
  height: 4px;
}

.txp-af__field {
  flex: 0 0 auto !important;
  min-width: 120px;
  max-width: 200px;
}

.txp-af__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--txp-af-primary);
  margin-bottom: 0.35rem;
}

.txp-af__select {
  display: flex;
  width: 100%;
  min-width: 0;
  padding: 0.5rem 0.75rem;
  font-size: 0.9rem;
  color: var(--txp-af-text);
  background: var(--txp-af-bg);
  border: 1px solid var(--txp-af-border);
  border-radius: 6px;
  cursor: pointer;
  appearance: auto;
}

.txp-af__select:hover,
.txp-af__select:focus {
  border-color: var(--txp-af-primary);
  outline: none;
}

/* Tablette : pas de fond (comme PC), horizontal */
@media (max-width: 1024px) and (min-width: 769px) {
  .txp-af {
    background: transparent;
    border: none;
    padding: 0 0 1rem;
    margin-bottom: 1rem;
  }

  .txp-af__row {
    gap: 0.75rem;
  }

  .txp-af__field {
    min-width: 100px;
    max-width: 180px;
  }
}

/* Mobile : scroll horizontal pour garder tout sur une ligne */
@media (max-width: 768px) {
  .txp-af {
    padding: 1rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 6px;
    overflow: hidden;
  }

  .txp-af__row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    gap: 0.5rem;
    padding-bottom: 0.25rem;
  }

  .txp-af__row::-webkit-scrollbar {
    height: 4px;
  }

  .txp-af__field {
    flex: 0 0 auto;
    min-width: 90px;
    max-width: 140px;
  }

  .txp-af__label {
    font-size: 0.65rem;
    margin-bottom: 0.2rem;
  }

  .txp-af__select {
    padding: 0.5rem 0.5rem;
    font-size: 0.85rem;
    min-height: 40px;
  }
}

/* Mobile étroit : champs encore plus compacts */
@media (max-width: 480px) {
  .txp-af {
    padding: 0.75rem 0.5rem;
  }

  .txp-af__field {
    min-width: 80px;
    max-width: 120px;
  }
}