/**
 * AffiliCore Search Bar — Estilos
 *
 * Convenção BEM: .ac-search-bar (bloco), .ac-sb__* (elementos), .ac-sb--* (modificadores).
 * Variáveis CSS para theming completo via Elementor ou CSS customizado.
 * Sem media queries inline — responsividade via classes Elementor.
 * Transições apenas em opacity e transform — sem transition:all.
 */

/* ============================================================================
   Variáveis CSS (tokens de design)
   ============================================================================ */

.ac-search-bar {
    /* Campo de pesquisa */
    --ac-input-bg:           #ffffff;
    --ac-input-color:        #1a1a2e;
    --ac-input-placeholder:  #9ca3af;
    --ac-input-border:       1px solid #d1d5db;
    --ac-input-radius:       8px;
    --ac-input-padding:      0.65rem 1rem;
    --ac-input-shadow:       0 1px 3px rgba(0,0,0,.06);
    --ac-input-focus-border: #6366f1;

    /* Ícones */
    --ac-icon-color:         #6b7280;
    --ac-icon-hover:         #6366f1;
    --ac-icon-size:          1rem;

    /* Botões de filtro (ordenação e marketplace compartilham base) */
    --ac-btn-color:          #374151;
    --ac-btn-bg:             #f3f4f6;
    --ac-btn-border:         1px solid #e5e7eb;
    --ac-btn-radius:         6px;
    --ac-btn-padding:        0.45rem 0.9rem;
    --ac-btn-gap:            0.5rem;
    --ac-btn-active-color:   #ffffff;
    --ac-btn-active-bg:      #6366f1;
    --ac-btn-active-border:  1px solid #6366f1;

    /* Separador de grupo */
    --ac-sep-color:          #9ca3af;
    --ac-sep-line:           #e5e7eb;
    --ac-sep-margin:         1.5rem 0;

    /* Toast */
    --ac-toast-bg:           #1a1a2e;
    --ac-toast-color:        #ffffff;
    --ac-toast-radius:       8px;
    --ac-toast-shadow:       0 4px 16px rgba(0,0,0,.25);

    /* Sticky */
    --ac-sticky-bg:          #ffffff;
    --ac-sticky-shadow:      0 2px 12px rgba(0,0,0,.10);

    /* Layout */
    --ac-gap:                0.75rem;

    /* Transição base */
    --ac-transition:         0.2s ease;
}

/* ============================================================================
   Reset seguro (apenas o necessário)
   ============================================================================ */

.ac-search-bar *,
.ac-search-bar *::before,
.ac-search-bar *::after {
    box-sizing: border-box;
}

/* Reset completo de botões dentro do plugin — garante que estilos nativos do
   navegador (borda, sombra, background cinza) não vazem mesmo que Elementor
   não emita CSS de borda quando configurado como "Nenhum". */
.ac-search-bar button {
    font-family:      inherit;
    font-size:        inherit;
    line-height:      inherit;
    border:           none;      /* neutraliza borda padrão de <button> */
    background:       none;      /* neutraliza background padrão */
    padding:          0;
    margin:           0;
    cursor:           pointer;
    appearance:       none;
    -webkit-appearance: none;
    box-shadow:       none;
    outline:          none;
}

.ac-search-bar input {
    font-family: inherit;
    font-size:   inherit;
    line-height: inherit;
}

/* ============================================================================
   Layout principal (.ac-search-bar)
   ============================================================================ */

.ac-search-bar {
    display:        flex;
    flex-wrap:      wrap;
    align-items:    center;
    gap:            var(--ac-gap);
    position:       relative;
    width:          100%;
}

/* Sentinela invisível para IntersectionObserver */
.ac-sb__sentinel {
    position:   absolute;
    top:        0;
    left:       0;
    width:      1px;
    height:     1px;
    visibility: hidden;
    pointer-events: none;
}

/* ============================================================================
   Campo de Pesquisa (.ac-sb__input-wrap)
   ============================================================================ */

.ac-sb__input-wrap {
    display:          flex;
    align-items:      center;
    flex:             1 1 200px;
    background-color: var(--ac-input-bg);
    border:           var(--ac-input-border);
    border-radius:    var(--ac-input-radius);
    box-shadow:       var(--ac-input-shadow);
    padding:          0 0.5rem;
    transition:       border-color var(--ac-transition),
                      box-shadow  var(--ac-transition);
}

.ac-sb__input-wrap:focus-within {
    border-color: var(--ac-input-focus-border);
    box-shadow:   0 0 0 3px rgba(99,102,241,.15);
}

.ac-sb__input {
    flex:             1;
    border:           none;
    outline:          none;
    background:       transparent;
    color:            var(--ac-input-color);
    padding:          var(--ac-input-padding);
    min-width:        0;
    /* Remove estilo nativo do input[type=search] */
    -webkit-appearance: none;
    appearance:       none;
}

.ac-sb__input::placeholder {
    color: var(--ac-input-placeholder);
}

/* Remove ícone nativo de limpeza do Chrome */
.ac-sb__input::-webkit-search-cancel-button {
    display: none;
}

/* ============================================================================
   Ícones (Lupa e ×)
   ============================================================================ */

.ac-sb__icon-search,
.ac-sb__icon-clear {
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background-color: transparent;
    border:           none;
    cursor:           pointer;
    padding:          0.25rem 0.4rem;
    color:            var(--ac-icon-color);
    font-size:        var(--ac-icon-size);
    transition:       color            var(--ac-transition),
                      background-color var(--ac-transition),
                      opacity          var(--ac-transition),
                      border-radius    var(--ac-transition),
                      padding          var(--ac-transition),
                      box-shadow       var(--ac-transition);
    flex-shrink:      0;
    line-height:      1;
}

.ac-sb__icon-search:hover,
.ac-sb__icon-clear:hover {
    color: var(--ac-icon-hover);
}

/* Garante que SVG e i (FontAwesome) renderizados pelo Elementor sejam visíveis */
.ac-sb__icon-search svg,
.ac-sb__icon-search i,
.ac-sb__icon-clear svg,
.ac-sb__icon-clear i {
    display:    block;
    width:      var(--ac-icon-size);
    height:     var(--ac-icon-size);
    font-size:  var(--ac-icon-size);
    color:      inherit;
    fill:       currentColor;
    flex-shrink: 0;
}

/* Ícone de busca — sempre visível */
.ac-sb__icon-search {
    opacity:        1;
    pointer-events: auto;
}

/* Ícone de limpar — visível só quando há texto no campo */
.ac-sb__icon-clear {
    opacity:    0;
    pointer-events: none;
}

.ac-sb--has-value .ac-sb__icon-clear {
    opacity:    1;
    pointer-events: auto;
}

/* Compatibilidade com hidden attr quando JS ainda não rodou */
.ac-sb__icon-clear[hidden] {
    display: none !important;
}

/* ============================================================================
   Filtros de Ordenação (.ac-sb__sort-filters)
   ============================================================================ */

.ac-sb__sort-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--ac-btn-gap);
}

.ac-sb__sort-btn {
    display:          inline-flex;
    align-items:      center;
    gap:              0.35rem;
    background-color: var(--ac-btn-bg);
    color:            var(--ac-btn-color);
    border:           none;   /* base: sem borda — Elementor adiciona se configurado */
    border-radius:    var(--ac-btn-radius);
    padding:          var(--ac-btn-padding);
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background-color var(--ac-transition),
                      color            var(--ac-transition),
                      border-color     var(--ac-transition),
                      box-shadow       var(--ac-transition),
                      transform        var(--ac-transition);
}

.ac-sb__sort-btn:hover {
    background-color: #e5e7eb;
}

.ac-sb__sort-btn.is-active,
.ac-sb__sort-btn[aria-pressed="true"] {
    background-color: var(--ac-btn-active-bg);
    color:            var(--ac-btn-active-color);
}

.ac-sb__sort-btn:active {
    transform: scale(0.96);
}

/* ============================================================================
   Filtros de Marketplace (.ac-sb__market-filters)
   ============================================================================ */

.ac-sb__market-filters {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         var(--ac-btn-gap);
    width:       100%;  /* ocupa linha inteira quando position=below */
}

/* Quando posição é right/left, não força largura total */
.ac-sb__market-filters:not(:only-child) {
    width: auto;
}

.ac-sb__market-btn {
    display:          inline-flex;
    align-items:      center;
    background-color: var(--ac-btn-bg);
    color:            var(--ac-btn-color);
    border:           none;   /* base: sem borda — Elementor adiciona se configurado */
    border-radius:    var(--ac-btn-radius);
    padding:          var(--ac-btn-padding);
    cursor:           pointer;
    white-space:      nowrap;
    transition:       background-color var(--ac-transition),
                      color            var(--ac-transition),
                      border-color     var(--ac-transition),
                      box-shadow       var(--ac-transition),
                      transform        var(--ac-transition);
}

.ac-sb__market-btn:hover {
    background-color: #e5e7eb;
}

.ac-sb__market-btn.is-active,
.ac-sb__market-btn[aria-pressed="true"] {
    background-color: var(--ac-btn-active-bg);
    color:            var(--ac-btn-active-color);
}

.ac-sb__market-btn:active {
    transform: scale(0.96);
}

/* Ponto indicador de filtro ativo — aparece à direita do rótulo */
.ac-sb__market-btn.is-active::after {
    content:          '';
    display:          block;
    width:            5px;
    height:           5px;
    border-radius:    50%;
    background-color: currentColor;
    opacity:          0.55;
    flex-shrink:      0;
    margin-left:      0.2rem;
}

/* ============================================================================
   Empty State (.ac-sb__empty-state)
   Injetado pelo JS no interior do Loop Grid quando a busca retorna zero itens.
   Usa grid-column: 1/-1 para ocupar toda a largura em layouts CSS Grid.
   ============================================================================ */

.ac-sb__empty-state {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             1rem;
    padding:         3rem 1rem;
    width:           100%;
    grid-column:     1 / -1;
    text-align:      center;
    color:           #6b7280;
    animation:       ac-card-in 0.3s ease both;
}

.ac-sb__empty-icon {
    display:    block;
    width:      3rem;
    height:     3rem;
    opacity:    0.35;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3Cline x1='8' y1='11' x2='14' y2='11'/%3E%3C/svg%3E") no-repeat center / contain;
}

.ac-sb__empty-text {
    font-size:   0.975rem;
    font-style:  italic;
    line-height: 1.5;
    max-width:   28ch;
}

/* ============================================================================
   Linha abaixo (.ac-sb__row-below)
   ============================================================================ */

.ac-sb__row-below {
    display:     flex;
    flex-wrap:   wrap;
    gap:         var(--ac-gap);
    width:       100%;
    align-items: center;
}

/* ============================================================================
   Separador de Grupo (.ac-sb__group-separator)
   Inserido pelo JS no Loop Grid, não dentro do widget.
   Ocupa a largura total do grid (display:contents não é necessário).
   ============================================================================ */

.ac-sb__group-separator {
    display:         flex;
    align-items:     center;
    gap:             0.75rem;
    margin:          var(--ac-sep-margin);
    width:           100%;        /* garante linha inteira no grid flex/grid */
    /* Em grids CSS o separador ocupa 1 coluna; forçamos para o total */
    grid-column:     1 / -1;
}

.ac-sb__group-separator::before,
.ac-sb__group-separator::after {
    content:          '';
    flex:             1;
    height:           1px;
    background-color: var(--ac-sep-line);
}

.ac-sb__group-separator span {
    color:       var(--ac-sep-color);
    font-size:   0.8125rem;
    font-weight: 500;
    white-space: nowrap;
}

/* ============================================================================
   Contador (.ac-sb__counter)
   ============================================================================ */

.ac-sb__counter {
    width:       100%;
    font-size:   0.875rem;
    color:       #6b7280;
    min-height:  1.2em; /* reserva espaço para evitar layout shift */
}

/* Estado "sem resultados" — destaque visual */
.ac-sb__counter--empty {
    display:     flex;
    align-items: center;
    gap:         0.45rem;
    font-style:  italic;
}

.ac-sb__counter--empty::before {
    content:          '';
    display:          inline-block;
    width:            1em;
    height:           1em;
    flex-shrink:      0;
    opacity:          0.55;
    background:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ============================================================================
   Loader (.ac-sb__loader)
   ============================================================================ */

.ac-sb__loader {
    position:   absolute;
    top:        50%;
    right:      1rem;
    transform:  translateY(-50%);
    pointer-events: none;
}

/* Spinner */
.ac-sb__loader--spinner::after {
    content:      '';
    display:      block;
    width:        1rem;
    height:       1rem;
    border:       2px solid #d1d5db;
    border-top-color: #6366f1;
    border-radius: 50%;
    animation:    ac-spin 0.7s linear infinite;
}

@keyframes ac-spin {
    to { transform: rotate(360deg); }
}

/* Skeleton — sobreposição translúcida */
.ac-sb__loader--skeleton {
    inset:            0;
    top:              0;
    right:            0;
    transform:        none;
    background:       linear-gradient(
                          90deg,
                          rgba(255,255,255,0)   0%,
                          rgba(255,255,255,.5)  50%,
                          rgba(255,255,255,0)   100%
                      );
    background-size:  200% 100%;
    animation:        ac-shimmer 1.2s infinite;
    border-radius:    inherit;
}

@keyframes ac-shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position:  200% 0; }
}

/* Animação de entrada dos cards após atualização do grid */
@keyframes ac-card-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.ac-sb--animate .e-loop-item {
    animation: ac-card-in 0.22s ease both;
}

/* Stagger cascata nos primeiros 8 cards */
.ac-sb--animate .e-loop-item:nth-child(1) { animation-delay:   0ms; }
.ac-sb--animate .e-loop-item:nth-child(2) { animation-delay:  35ms; }
.ac-sb--animate .e-loop-item:nth-child(3) { animation-delay:  70ms; }
.ac-sb--animate .e-loop-item:nth-child(4) { animation-delay: 105ms; }
.ac-sb--animate .e-loop-item:nth-child(5) { animation-delay: 140ms; }
.ac-sb--animate .e-loop-item:nth-child(6) { animation-delay: 175ms; }
.ac-sb--animate .e-loop-item:nth-child(7) { animation-delay: 210ms; }
.ac-sb--animate .e-loop-item:nth-child(8) { animation-delay: 245ms; }

@media (prefers-reduced-motion: reduce) {
    .ac-sb--animate .e-loop-item { animation: none; }
}

/* Oculto por padrão — visível apenas no estado loading */
.ac-sb__loader {
    display: none;
}
.ac-sb--loading .ac-sb__loader {
    display: block;
}

/* ============================================================================
   Estado: Sticky (.ac-sb--sticky)
   ============================================================================ */

.ac-sb--sticky {
    position:   fixed !important;
    left:       0;
    right:      0;
    width:      100%;
    background-color: var(--ac-sticky-bg);
    box-shadow:       var(--ac-sticky-shadow);
    padding:    0.5rem 1rem;
}

/* ============================================================================
   Toast (.ac-sb__toast)
   Posicionado no body, fora do widget.
   ============================================================================ */

.ac-sb__toast {
    position:         fixed;
    z-index:          99999;
    display:          flex;
    align-items:      center;
    gap:              0.75rem;
    padding:          0.75rem 1rem;
    background-color: var(--ac-toast-bg);
    color:            var(--ac-toast-color);
    border-radius:    var(--ac-toast-radius);
    box-shadow:       var(--ac-toast-shadow);
    max-width:        min(90vw, 420px);
    font-size:        0.875rem;
    line-height:      1.4;

    /* Estado inicial: oculto */
    opacity:          0;
    transform:        translateY(1rem);
    pointer-events:   none;
    transition:       opacity 0.25s ease,
                      transform 0.25s ease;
}

/* Visível */
.ac-sb__toast.is-visible {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

/* Saindo */
.ac-sb__toast.is-leaving {
    opacity:   0;
    transform: translateY(1rem);
}

/* Posicionamento */
.ac-sb__toast--bottom-right {
    bottom: 1.5rem;
    right:  1.5rem;
}
.ac-sb__toast--bottom-left {
    bottom: 1.5rem;
    left:   1.5rem;
}
.ac-sb__toast--bottom-center {
    bottom:    1.5rem;
    left:      50%;
    transform: translateX(-50%) translateY(1rem);
}
.ac-sb__toast--bottom-center.is-visible {
    transform: translateX(-50%) translateY(0);
}
.ac-sb__toast--bottom-center.is-leaving {
    transform: translateX(-50%) translateY(1rem);
}

/* Posições Superiores — deslizam de cima para baixo */
.ac-sb__toast--top-right {
    top:       1.5rem;
    right:     1.5rem;
    transform: translateY(-1rem); /* começa acima da posição final */
}
.ac-sb__toast--top-left {
    top:       1.5rem;
    left:      1.5rem;
    transform: translateY(-1rem);
}
.ac-sb__toast--top-center {
    top:       1.5rem;
    left:      50%;
    transform: translateX(-50%) translateY(-1rem);
}
.ac-sb__toast--top-center.is-visible {
    transform: translateX(-50%) translateY(0);
}
.ac-sb__toast--top-center.is-leaving {
    transform: translateX(-50%) translateY(-1rem);
}
.ac-sb__toast--top-right.is-leaving,
.ac-sb__toast--top-left.is-leaving {
    transform: translateY(-1rem);
}

/* Botão fechar */
.ac-sb__toast-close {
    background:  none;
    border:      none;
    color:       inherit;
    cursor:      pointer;
    padding:     0;
    font-size:   1rem;
    line-height: 1;
    opacity:     0.7;
    flex-shrink: 0;
    transition:  opacity var(--ac-transition);
}
.ac-sb__toast-close:hover {
    opacity: 1;
}

/* ============================================================================
   Estado: Loading no campo
   ============================================================================ */

.ac-sb--loading .ac-sb__input-wrap {
    pointer-events: none;
    opacity:        0.8;
}

.ac-sb--loading .ac-sb__sort-filters,
.ac-sb--loading .ac-sb__market-filters {
    pointer-events: none;
    opacity:        0.6;
}