/**
 * Ajax Search Pro — Stylesheet
 * assets/ajax-search.css
 *
 * Design system usa CSS Custom Properties para fácil customização
 * via Bricks Builder ou theme.json.
 */

/* ─────────────────────────────────────────────────────────────────────────────
   CSS Variables — override via :root ou .asp-wrapper no Bricks
   ───────────────────────────────────────────────────────────────────────────── */
.asp-wrapper {
    --asp-accent:              #f58220;         /* cor principal / highlight */
    --asp-accent-hover:        #c95f04;
    --asp-input-bg:            #fafafa;
    --asp-input-border:        #e2e8f0;
    --asp-input-border-focus:  var(--asp-accent);
    --asp-input-text:          #000000;
    --asp-input-placeholder:   #999999;
    --asp-input-radius:        10px;
    --asp-input-height:        48px;
    --asp-input-font-size:     14px;       /* 14px */

    --asp-dropdown-bg:         #ffffff;
    --asp-dropdown-border:     #e2e8f0;
    --asp-dropdown-shadow:     0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
    --asp-dropdown-radius:     12px;
    --asp-dropdown-max-height: 480px;

    --asp-card-radius:         8px;
    --asp-card-bg:             #ffffff;
    --asp-card-bg-hover:       #fafafa;
    --asp-card-border:         #eaecf0;
    --asp-card-shadow-hover:   0 4px 16px rgba(0,0,0,0.08);

    --asp-title-color:         #000000
    --asp-title-size:          14px;       /* 13px */
    --asp-price-color:         #000000;
    --asp-price-size:          14px;
    --asp-sku-color:           #94a3b8;
    --asp-sku-size:            13px;

    --asp-mark-bg:             #fef08a;         /* highlight amarelo */
    --asp-mark-color:          #1e293b;

    --asp-badge-sale-bg:       #ef4444;
    --asp-badge-sale-color:    #ffffff;

    --asp-footer-bg:           #f8fafc;
    --asp-footer-border:       #e2e8f0;

    --asp-spinner-color:       var(--asp-accent);
    --asp-transition:          0.18s ease;

    position: relative;
    width: 100%;
    font-family: inherit;
    box-sizing: border-box;
}

*, *::before, *::after {
    box-sizing: inherit;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Form & Input
   ───────────────────────────────────────────────────────────────────────────── */
.asp-form {
    margin:  0;
    padding: 0;
}

.asp-input-wrap {
    position:        relative;
    display:         flex;
    align-items:     center;
    background:      var(--asp-input-bg);
    border:          1.5px solid var(--asp-input-border);
    border-radius:   var(--asp-input-radius);
    transition:      border-color var(--asp-transition),
                     box-shadow   var(--asp-transition);
    overflow:        hidden;
}

.asp-input-wrap:focus-within {
    border-color: var(--asp-input-border-focus);
    box-shadow:   0 0 0 3px rgba(37, 99, 235, 0.12);
}

.asp-input {
    flex:           1;
    height:         var(--asp-input-height);
    padding:        0 0.75rem 0 1rem;
    border:         none;
    outline:        none;
    background:     transparent;
    color:          var(--asp-input-text);
    font-size:      var(--asp-input-font-size);
    font-family:    inherit;
    line-height:    1;
    /* Remove browser default search cancel button */
    -webkit-appearance: none;
    appearance:     none;
}

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

.asp-input::-webkit-search-cancel-button,
.asp-input::-webkit-search-decoration {
    display: none;
}

/* ── Icon buttons ────────────────────────────────────────────────────────────── */
.asp-btn-search,
.asp-btn-clear {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           var(--asp-input-height);
    height:          var(--asp-input-height);
    border:          none;
    background:      transparent;
    color:           var(--asp-input-placeholder);
    cursor:          pointer;
    transition:      color var(--asp-transition);
    padding:         0;
}

.asp-btn-search:hover,
.asp-btn-clear:hover {
    color: var(--asp-accent);
}

.asp-btn-search svg,
.asp-btn-clear svg {
    width:  18px;
    height: 18px;
}

.asp-btn-clear {
   display: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dropdown
   ───────────────────────────────────────────────────────────────────────────── */
.asp-dropdown {
    position:         absolute;
    top:              calc(100% + 6px);
    left:             0;
    right:            0;
    z-index:          9999;
    background:       var(--asp-dropdown-bg);
    border:           1.5px solid var(--asp-dropdown-border);
    border-radius:    var(--asp-dropdown-radius);
    box-shadow:       var(--asp-dropdown-shadow);
    max-height:       var(--asp-dropdown-max-height);
    overflow-y:       auto;
    overflow-x:       hidden;
    overscroll-behavior: contain;
    /* Smooth scroll for infinite scroll */
    scroll-behavior:  smooth;
    /* Custom scrollbar */
    scrollbar-width:  thin;
    scrollbar-color:  #cbd5e1 transparent;
}

.asp-dropdown::-webkit-scrollbar {
    width: 5px;
}
.asp-dropdown::-webkit-scrollbar-track {
    background: transparent;
}
.asp-dropdown::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius:    3px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Product Grid — 2 colunas
   ───────────────────────────────────────────────────────────────────────────── */
.asp-results-grid {
    display:               grid;
    grid-template-columns: repeat(2, 1fr);
    gap:                   1px;
    background:            var(--asp-card-border);  /* faz o "gap" parecer separadores */
    border-radius:         calc(var(--asp-dropdown-radius) - 2px)
                           calc(var(--asp-dropdown-radius) - 2px)
                           0 0;
    overflow:              hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Product Card — layout horizontal (imagem 48×48 + info à direita)
   ───────────────────────────────────────────────────────────────────────────── */
.asp-card {
    display:         flex;
    flex-direction:  row;       /* imagem | info lado a lado */
    align-items:     center;
    background:      var(--asp-card-bg);
    text-decoration: none;
    color:           inherit;
    padding:         10px 12px;
    gap:             12px;
    transition:      background var(--asp-transition),
                     box-shadow  var(--asp-transition);
    outline:         none;
}

.asp-card:hover,
.asp-card:focus-visible {
    background:  var(--asp-card-bg-hover);
    box-shadow:  inset 0 0 0 1.5px var(--asp-accent);
    z-index:     1;
}

/* Image — tamanho fixo 48×48 */
.asp-card__img-wrap {
    position:      relative;
    width:         48px;
    height:        48px;
    min-width:     48px;       /* impede encolher */
    border-radius: 6px;
    overflow:      hidden;
    background:    #f8fafc;
    flex-shrink:   0;
}

.asp-card__img-wrap img {
    width:       100%;
    height:      100%;
    object-fit:  contain;
    display:     block;
    transition:  transform 0.3s ease;
}

.asp-card:hover .asp-card__img-wrap img {
    transform: scale(1.06);
}

/* Sale badge — ajustado para imagem menor */
.asp-badge-sale {
    position:        absolute;
    top:             2px;
    left:            2px;
    background:      var(--asp-badge-sale-bg);
    color:           var(--asp-badge-sale-color);
    font-size:       0.5rem;
    font-weight:     700;
    letter-spacing:  0.04em;
    text-transform:  uppercase;
    padding:         1px 4px;
    border-radius:   3px;
    line-height:     1.4;
    pointer-events:  none;
}

/* Info — ocupa o espaço restante */
.asp-card__info {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    min-width:      0;          /* evita overflow do título */
    flex:           1;
}

.asp-card__title {
    margin:       0;
    font-size:    var(--asp-title-size);
    font-weight:  500;
    color:        var(--asp-title-color);
    line-height:  1.4;
    /* Two-line clamp */
    display:           -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow:          hidden;
}

.asp-card__price {
    font-size:   var(--asp-price-size);
    font-weight: 600;
    color:       var(--asp-price-color);
    line-height: 1.3;
}

/* WooCommerce del / ins inside price_html */
.asp-card__price del {
    font-size:   0.75em;
    color:       var(--asp-input-placeholder);
    font-weight: 400;
}

.asp-card__price ins {
    text-decoration: none;
}

.asp-card__sku {
    font-size:  var(--asp-sku-size);
    color:      var(--asp-sku-color);
    white-space: nowrap;
    overflow:   hidden;
    text-overflow: ellipsis;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Highlight marks
   ───────────────────────────────────────────────────────────────────────────── */
.asp-card mark {
    background:  var(--asp-mark-bg);
    color:       var(--asp-mark-color);
    font-weight: 700;
    padding:     0 1px;
    border-radius: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Loader
   ───────────────────────────────────────────────────────────────────────────── */
.asp-loader {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         20px;
    color:           var(--asp-input-placeholder);
    font-size:       0.875rem;
}

.asp-spinner {
    display:       inline-block;
    width:         18px;
    height:        18px;
    border:        2.5px solid #e2e8f0;
    border-top-color: var(--asp-spinner-color);
    border-radius: 50%;
    animation:     asp-spin 0.7s linear infinite;
    flex-shrink:   0;
}

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

/* ─────────────────────────────────────────────────────────────────────────────
   No Results
   ───────────────────────────────────────────────────────────────────────────── */
.asp-no-results {
    display:         none;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         28px 20px;
    color:           var(--asp-input-placeholder);
    font-size:       0.875rem;
}

.asp-no-results svg {
    width:      20px;
    height:     20px;
    flex-shrink: 0;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Footer — "Ver todos"
   ───────────────────────────────────────────────────────────────────────────── */
.asp-footer {
    padding:          10px 14px;
    background:       var(--asp-footer-bg);
    border-top:       1.5px solid var(--asp-footer-border);
    border-radius:    0 0 var(--asp-dropdown-radius) var(--asp-dropdown-radius);
    position:         sticky;
    bottom:           0;
    z-index:          2;
}

.asp-see-all {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    font-size:       0.8125rem;
    font-weight:     600;
    color:           var(--asp-accent);
    text-decoration: none;
    transition:      color var(--asp-transition);
}

.asp-see-all:hover {
    color: var(--asp-accent-hover);
    text-decoration: underline;
}

.asp-see-all svg {
    width:  14px;
    height: 14px;
    transition: transform var(--asp-transition);
}

.asp-see-all:hover svg {
    transform: translateX(3px);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Infinite scroll sentinel
   ───────────────────────────────────────────────────────────────────────────── */
.asp-sentinel {
    height:     1px;
    visibility: hidden;
}

/* ─────────────────────────────────────────────────────────────────────────────
   Responsive — mobile: 1 coluna abaixo de 400px
   ───────────────────────────────────────────────────────────────────────────── */
@media (max-width: 400px) {
    .asp-results-grid {
        grid-template-columns: 1fr;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Reduced motion
   ───────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .asp-spinner {
        animation: none;
        opacity:   0.5;
    }
    .asp-card__img-wrap img,
    .asp-see-all svg {
        transition: none;
    }
}

/* ─────────────────────────────────────────────────────────────────────────────
   Dark mode (respeita prefers-color-scheme)
   ───────────────────────────────────────────────────────────────────────────── */
/**
   @media (prefers-color-scheme: dark) {
    .asp-wrapper {
        --asp-input-bg:        #1e293b;
        --asp-input-border:    #334155;
        --asp-input-text:      #f1f5f9;
        --asp-input-placeholder: #64748b;

        --asp-dropdown-bg:     #1e293b;
        --asp-dropdown-border: #334155;
        --asp-dropdown-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 2px 8px rgba(0,0,0,0.2);

        --asp-card-bg:         #1e293b;
        --asp-card-bg-hover:   #273549;
        --asp-card-border:     #2d3f55;
        --asp-title-color:     #f1f5f9;
        --asp-mark-bg:         #854d0e;
        --asp-mark-color:      #fef9c3;

        --asp-footer-bg:       #182030;
        --asp-footer-border:   #334155;
    }
}
**/