/**
 * Swiper Theme Overrides — v3.2
 *
 * Sobreescreve os estilos do Swiper (CDN) com Design Tokens v3.2.
 * Carregado APÓS o CSS do Swiper para garantir especificidade.
 *
 * Aplica-se a: sec-testimonials.php e qualquer seção que use Swiper.
 *
 * REGRAS:
 *   - Todos os valores de cor e espaçamento vêm de tokens
 *   - Preserva a lógica de JS do Swiper (não remove nenhuma classe funcional)
 *   - Não duplica estilos já existentes no CSS da seção
 *
 * @package FocofyFactory
 * @version 3.3
 * v3.2 → v3.3: max-width: 1100px → 1023px (breakpoint canônico)
 */

/* ══════════════════════════════════════════════════════════════════════════
   CONTAINER
   ══════════════════════════════════════════════════════════════════════════ */

.swiper {
  width:     100%;
  overflow:  hidden;
  position:  relative;
}

.swiper-wrapper {
  display:   flex;
  width:     100%;
  box-sizing: content-box;
}

.swiper-slide {
  flex-shrink: 0;
  width:       100%;
  height:      auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   PAGINAÇÃO — dots
   ══════════════════════════════════════════════════════════════════════════ */

.swiper-pagination {
  display:         flex;
  justify-content: center;
  align-items:     center;
  gap:             var(--space-2);
  padding-top:     var(--space-6);
  position:        static;
  width:           100%;
}

.swiper-pagination-bullet {
  width:          10px;
  height:         10px;
  border-radius:  var(--radius-full);
  background:     var(--color-border-strong);
  opacity:        1;
  cursor:         pointer;
  transition:
    background   var(--transition-fast) ease,
    width        var(--transition-fast) ease,
    opacity      var(--transition-fast) ease;
  flex-shrink:   0;
}

.swiper-pagination-bullet-active {
  background: var(--color-accent);
  width:      24px;
}

/* ══════════════════════════════════════════════════════════════════════════
   NAVEGAÇÃO — setas prev/next
   ══════════════════════════════════════════════════════════════════════════ */

.swiper-button-prev,
.swiper-button-next {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   var(--radius-full);
  background:      var(--color-surface-2);
  border:          1px solid var(--color-border-subtle);
  cursor:          pointer;
  transition:
    background   var(--transition-fast) ease,
    border-color var(--transition-fast) ease,
    transform    var(--transition-fast) ease,
    opacity      var(--transition-fast) ease;
  position:        absolute;
  top:             50%;
  transform:       translateY(-50%);
  z-index:         10;
}

.swiper-button-prev { left: calc(-1 * var(--space-12)); }
.swiper-button-next { right: calc(-1 * var(--space-12)); }

.swiper-button-prev:hover,
.swiper-button-next:hover {
  background:   var(--color-surface-3);
  border-color: var(--color-border-strong);
}

/* Ícone — substitui a seta padrão do Swiper */
.swiper-button-prev::after,
.swiper-button-next::after {
  content:     '';
  display:     block;
  width:       10px;
  height:      10px;
  border-top:   2px solid var(--color-text);
  border-right: 2px solid var(--color-text);
}

.swiper-button-prev::after { transform: rotate(-135deg) translate(1px, -1px); }
.swiper-button-next::after { transform: rotate(45deg)   translate(-1px, 1px); }

/* Desabilitado */
.swiper-button-disabled {
  opacity:        0.35;
  cursor:         not-allowed;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════════════════════════
   SCROLLBAR (quando usado no lugar de dots)
   ══════════════════════════════════════════════════════════════════════════ */

.swiper-scrollbar {
  height:        4px;
  background:    var(--color-surface-3);
  border-radius: var(--radius-full);
  overflow:      hidden;
  margin-top:    var(--space-6);
}

.swiper-scrollbar-drag {
  height:        100%;
  background:    var(--color-accent);
  border-radius: var(--radius-full);
  cursor:        grab;
}

.swiper-scrollbar-drag:active {
  cursor: grabbing;
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE — setas dentro (para uso com overflow:hidden)
   ══════════════════════════════════════════════════════════════════════════ */

.swiper--arrows-inside .swiper-button-prev { left: var(--space-4); }
.swiper--arrows-inside .swiper-button-next { right: var(--space-4); }

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE — setas abaixo com dots (layout common em testimonials)
   ══════════════════════════════════════════════════════════════════════════ */

.swiper--controls-bottom .swiper-button-prev,
.swiper--controls-bottom .swiper-button-next {
  position:  static;
  transform: none;
  top:       auto;
}

.swiper--controls-bottom .focofy-testimonials__controls,
.swiper-controls {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--space-4);
  padding-top:     var(--space-8);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1023px) {            /* abaixo de --bp-desktop */
  /* Esconde setas laterais onde não há espaço */
  .swiper-button-prev,
  .swiper-button-next {
    display: none;
  }
}