/* ==========================================================
   CTS Catálogo — Microinterações & Estados Visuais (v1)
   Complementa shared.css + arquivos de componente.
   Carregado após os demais CSS para maior especificidade.
   ========================================================== */

/* ----------------------------------------------------------
   1. CURSOR — garantia global de cursor correto
   ---------------------------------------------------------- */
button,
[role="button"],
[tabindex="0"],
label[for],
.category-btn,
.category-group-btn,
.category-child-btn,
.view-btn,
.menu-toggle,
.mobile-filter-btn,
.pagination-load-more,
.premium-thumb-btn,
.modal-nav-arrow,
.premium-modal-close,
.premium-btn-primary,
.premium-btn-icon,
.card-copy-btn,
.sidebar-brand-link,
.breadcrumb a,
.search-clear-btn,
.search-tag-remove {
  cursor: pointer;
}

/* ----------------------------------------------------------
   2. BREADCRUMB — transição de cor suave + estado de foco
   ---------------------------------------------------------- */
.breadcrumb a {
  color: var(--text-accent);
  text-decoration: none;
  border-radius: 3px;
  transition:
    color var(--transition-fast),
    text-decoration-color var(--transition-fast),
    outline-offset var(--transition-fast);
  text-decoration-color: transparent;
  outline-offset: 2px;
}

.breadcrumb a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
  text-decoration-color: currentColor;
}

.breadcrumb a:active {
  opacity: 0.75;
}

.breadcrumb a:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
  border-radius: 3px;
}

/* ----------------------------------------------------------
   3. NAVIGATION ARROWS DO MODAL — active + focus-visible
   ---------------------------------------------------------- */
.modal-nav-arrow:active {
  transform: translateY(-50%) scale(0.94);
  box-shadow: var(--shadow-1);
  background: var(--surface-2);
  transition-duration: var(--dur-1);
}

.modal-nav-arrow:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   4. THUMBNAIL BUTTONS DO MODAL — hover lift + active press
   ---------------------------------------------------------- */
.premium-thumb-btn {
  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.premium-thumb-btn:hover:not(.active) {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-2);
  transform: translateY(-2px) scale(1.04);
}

.premium-thumb-btn:active {
  transform: translateY(0) scale(0.97);
  transition-duration: var(--dur-1);
}

.premium-thumb-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   5. BOTÃO FECHAR MODAL — scale pulse no hover + focus
   ---------------------------------------------------------- */
.premium-modal-close {
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.premium-modal-close:hover {
  transform: scale(1.08);
  background: var(--color-neutral-200);
  color: var(--text-primary);
  border-color: var(--border-strong);
}

.premium-modal-close:active {
  transform: scale(0.94);
  transition-duration: var(--dur-1);
}

.premium-modal-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   6. BOTÃO PRIMÁRIO DO MODAL — focus-visible
   ---------------------------------------------------------- */
.premium-btn-primary:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow:
    var(--focus-ring),
    0 6px 18px rgba(253, 105, 25, 0.28);
}

/* ----------------------------------------------------------
   7. ICON ACTION BUTTONS DO MODAL — focus-visible
   ---------------------------------------------------------- */
.premium-btn-icon:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   8. VIEW BUTTONS (grid/list) — focus-visible
   ---------------------------------------------------------- */
.view-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   9. PAGINATION — focus-visible
   ---------------------------------------------------------- */
.pagination-load-more:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   10. SIDEBAR BUTTONS — :active state
   ---------------------------------------------------------- */
.category-btn:active,
.category-group-btn:active,
.category-child-btn:active {
  transform: translateX(1px) scale(0.98);
  opacity: 0.85;
  transition-duration: var(--dur-1);
}

/* ----------------------------------------------------------
   11. SIDEBAR BRAND LINK — focus-visible
   ---------------------------------------------------------- */
.sidebar-brand-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}

/* ----------------------------------------------------------
   12. MENU TOGGLE (mobile) — focus-visible
   ---------------------------------------------------------- */
.menu-toggle:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.9);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(253, 105, 25, 0.28);
}

/* ----------------------------------------------------------
   13. MOBILE FILTER BUTTON — hover completo
   ---------------------------------------------------------- */
.mobile-filter-btn.visible:hover {
  background: rgba(253, 105, 25, 0.06);
  border-color: var(--color-brand-600);
  color: var(--color-brand-600);
  transform: translateY(-1px);
  box-shadow: var(--shadow-card);
}

.mobile-filter-btn.visible:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   14. SEARCH CLEAR BUTTON — focus-visible
   ---------------------------------------------------------- */
.search-clear-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  box-shadow: var(--focus-ring);
}

/* ----------------------------------------------------------
   15. SEARCH TAG REMOVE — focus-visible
   ---------------------------------------------------------- */
.search-tag-remove:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
  box-shadow: var(--focus-ring);
  border-radius: 50%;
}

/* ----------------------------------------------------------
   16. MACHINE CARDS — focus-visible ring explícito (reforço)
   Já existe no catalog.cards.css mas reforça o anel de foco.
   ---------------------------------------------------------- */
.machine-card:focus-visible {
  outline: none;
  box-shadow:
    0 22px 38px -24px rgba(28, 20, 16, 0.3),
    0 10px 22px -20px rgba(28, 20, 16, 0.18),
    0 0 0 3px rgba(253, 105, 25, 0.22);
}

.card:focus-visible {
  outline: none;
  box-shadow:
    0 24px 38px -28px rgba(28, 20, 16, 0.3),
    0 10px 22px -20px rgba(28, 20, 16, 0.16),
    0 0 0 3px rgba(253, 105, 25, 0.22);
}

/* ----------------------------------------------------------
   17. AUTHORITY ITEMS — microinteração sutil (hover)
   ---------------------------------------------------------- */
.authority-item {
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.authority-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 32px -22px rgba(28, 20, 16, 0.28);
}

/* ----------------------------------------------------------
   18. REDUCED MOTION — garante que nenhuma das interações
   acima quebre preferências de acessibilidade.
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .premium-modal-close,
  .modal-nav-arrow,
  .premium-thumb-btn,
  .authority-item,
  .breadcrumb a,
  .mobile-filter-btn.visible {
    transition: none !important;
    transform: none !important;
  }
}