/*
 * WPVS — Visual Search
 * search.css v1.0.0
 *
 * All selectors are prefixed with .wpvs-* to avoid theme conflicts.
 * CSS custom properties are scoped inside .wpvs so Elementor style
 * controls can override them per-widget via inline style.
 */

/* ── Reset & scope ────────────────────────────────────────────────────────── */
.wpvs,
.wpvs *,
.wpvs *::before,
.wpvs *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ── Design tokens ────────────────────────────────────────────────────────── */
.wpvs {
    /* Overridable via Elementor inline style on .wpvs */
    --wpvs-modal-bg   : #ffffff;
    --wpvs-accent     : #1a1a1a;
    --wpvs-bar-border : #223829;

    /* Fixed tokens */
    --wpvs-text       : #1a1a1a;
    --wpvs-muted      : #6b6b6b;
    --wpvs-border     : #e0ddd8;
    --wpvs-surface    : #f5f3ef;
    --wpvs-hover      : #f0ede8;
    --wpvs-radius-sm  : 4px;
    --wpvs-radius-md  : 8px;
    --wpvs-radius-pill: 100px;
    --wpvs-shadow     : 0 8px 32px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.06);
    --wpvs-transition : 220ms cubic-bezier(.4, 0, .2, 1);
    --wpvs-z          : 999999;
    --wpvs-font       : inherit; /* inherits theme font */
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRIGGER BAR
   ═══════════════════════════════════════════════════════════════════════════ */

.wpvs-bar {
    display         : inline-flex;
    align-items     : center;
    gap             : 10px;
    padding         : 1px 18px 1px 22px;
    background      : var(--wpvs-surface);
    border          : 1.5px solid var(--wpvs-bar-border);
    border-radius   : var(--wpvs-radius-pill);
    cursor          : pointer;
    font-family     : var(--wpvs-font);
    width           : 100%;
    max-width       : 420px;
    /* No transition — hover must be completely inert */
    transition      : none;
    white-space     : nowrap;
    text-align      : left;
}

/*
 * Hard-reset every property a theme's global-palette button rule might touch
 * on hover. !important is intentional: these overrides must win against
 * Elementor's global button hover selectors (e.g. .elementor-button:hover,
 * button:hover, [class*="btn"]:hover …).
 */
.wpvs-bar:hover {
    background      : var(--wpvs-surface)    !important;
    background-color: var(--wpvs-surface)    !important;
    border-color    : var(--wpvs-bar-border) !important;
    color           : inherit                !important;
    box-shadow      : none                   !important;
    outline         : none                   !important;
    text-decoration : none                   !important;
    opacity         : 1                      !important;
    filter          : none                   !important;
    transform       : none                   !important;
}

.wpvs-bar:focus-visible {
    border-color : var(--wpvs-accent);
    box-shadow   : 0 0 0 3px color-mix(in srgb, var(--wpvs-accent) 12%, transparent);
    outline      : none;
}

.wpvs-bar__placeholder {
    flex        : 1;
    font-size   : 14px;
    color       : var(--wpvs-muted);
    font-family : var(--wpvs-font);
    overflow    : hidden;
    text-overflow: ellipsis;
}

.wpvs-bar__icon {
    flex-shrink  : 0;
    color        : var(--wpvs-muted);
    width        : 18px;
    height       : 18px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MODAL BACKDROP
   ═══════════════════════════════════════════════════════════════════════════ */

.wpvs-modal {
    position         : fixed;
    top              : 0;
    left             : 50%;
    transform        : translateX(-50%);
    z-index          : var(--wpvs-z);

    /*
     * Size to content — no scroll.
     * overflow: visible would clip box-shadow; clip: visible ensures the
     * shadow renders. We let the inner content determine height naturally.
     */
    height           : auto;
    width            : max-content;
    max-width        : min(90vw, 960px);
    min-width        : min(320px, 90vw);
    overflow         : visible;

    background       : var(--wpvs-modal-bg);
    border-radius    : 0 0 var(--wpvs-radius-md) var(--wpvs-radius-md);
    box-shadow       : var(--wpvs-shadow);

    /* Entry animation */
    animation        : none;
}

.wpvs-modal:not([hidden]) {
    animation: wpvs-sheet-in 280ms cubic-bezier(.22, 1, .36, 1) both;
}

/*
 * IMPORTANT: keyframes must always carry translateX(-50%) alongside any Y
 * offset — otherwise the animation's transform property overwrites the
 * element's base transform and the panel snaps to left:50% with no centering.
 */
@keyframes wpvs-sheet-in {
    from {
        opacity   : 0;
        transform : translateX(-50%) translateY(-12px);
    }
    to {
        opacity   : 1;
        transform : translateX(-50%) translateY(0);
    }
}

/* Exit — added via JS class before re-applying hidden */
.wpvs-modal.is-closing {
    animation: wpvs-sheet-out 200ms cubic-bezier(.4, 0, 1, 1) both;
    pointer-events: none;
}

@keyframes wpvs-sheet-out {
    to {
        opacity   : 0;
        transform : translateX(-50%) translateY(-8px);
    }
}

/* ── Inner wrapper: max-width + padding ── */
.wpvs-modal__inner {
    max-width  : 960px;
    margin     : 0 auto;
    padding    : 20px 28px 28px;
    display    : flex;
    flex-direction: column;
    gap        : 20px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH ROW (inside modal)
   ═══════════════════════════════════════════════════════════════════════════ */

.wpvs-modal__search-row {
    display         : flex;
    justify-content : center;
}

.wpvs-modal__input-wrap {
    position        : relative;
    display         : flex;
    align-items     : center;
    width           : 100%;
    max-width       : 560px;
    border          : 1.5px solid var(--wpvs-border);
    border-radius   : var(--wpvs-radius-pill);
    padding         : 11px 14px 11px 24px;
    gap             : 8px;
    background      : #fff;
    transition      : border-color var(--wpvs-transition), box-shadow var(--wpvs-transition);
}

.wpvs-modal__input-wrap:focus-within {
    border-color : var(--wpvs-accent);
    box-shadow   : 0 0 0 3px color-mix(in srgb, var(--wpvs-accent) 10%, transparent);
}

.wpvs-modal__input {
    flex        : 1;
    border      : none;
    outline     : none;
    background  : transparent;
    font-size   : 16px;
    font-family : var(--wpvs-font);
    color       : var(--wpvs-text);
    min-width   : 0;

    /* Remove native search cancel button */
    -webkit-appearance: none;
}

.wpvs-modal__input::placeholder { color: var(--wpvs-muted); }
.wpvs-modal__input::-webkit-search-cancel-button { display: none; }

.wpvs-modal__clear {
    display         : inline-flex;
    align-items     : center;
    justify-content : center;
    background      : transparent;
    border          : none;
    cursor          : pointer;
    padding         : 4px;
    border-radius   : 50%;
    color           : var(--wpvs-muted);
    transition      : background var(--wpvs-transition), color var(--wpvs-transition);
    flex-shrink     : 0;
}

.wpvs-modal__clear:hover   { background: var(--wpvs-hover); color: var(--wpvs-text); }
.wpvs-modal__clear[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   BODY: RESULTS + SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.wpvs-modal__body {
    display    : flex;
    gap        : 56px;
    align-items: flex-start;
}

/* ── Results area ── */
.wpvs-results {
    flex  : 1;
    min-width: 0;
}

.wpvs-results__heading {
    font-size  : 22px;
    font-weight: 700;
    color      : var(--wpvs-text);
    letter-spacing: -.3px;
    margin-bottom : 24px;
    font-family: var(--wpvs-font);
}

.wpvs-results__heading[hidden] { display: none; }

.wpvs-results__feedback {
    font-size : 15px;
    color     : var(--wpvs-muted);
    min-height: 22px;
    font-family: var(--wpvs-font);
}

/* ── Products grid ── */
.wpvs-results__grid {
    display              : grid;
    grid-template-columns: repeat(4, 1fr);
    gap                  : 20px;
    margin-top           : 20px;
}

/* ── Product card ── */
.wpvs-card {
    display       : flex;
    flex-direction: column;
    gap           : 10px;
    animation     : wpvs-card-rise 280ms var(--wpvs-card-delay, 0ms) cubic-bezier(.22,1,.36,1) both;
}

@keyframes wpvs-card-rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}

/* Stagger delays for up to 8 cards */
.wpvs-card:nth-child(1) { --wpvs-card-delay:  20ms; }
.wpvs-card:nth-child(2) { --wpvs-card-delay:  50ms; }
.wpvs-card:nth-child(3) { --wpvs-card-delay:  80ms; }
.wpvs-card:nth-child(4) { --wpvs-card-delay: 110ms; }
.wpvs-card:nth-child(5) { --wpvs-card-delay: 140ms; }
.wpvs-card:nth-child(6) { --wpvs-card-delay: 170ms; }
.wpvs-card:nth-child(7) { --wpvs-card-delay: 200ms; }
.wpvs-card:nth-child(8) { --wpvs-card-delay: 230ms; }

.wpvs-card__thumb-wrap {
    position     : relative;
    overflow     : hidden;
    border-radius: var(--wpvs-radius-md);
    aspect-ratio : 1 / 1.05;
    background   : var(--wpvs-surface);
}

.wpvs-card__thumb {
    width        : 100%;
    height       : 100%;
    object-fit   : cover;
    display      : block;
    border-radius: inherit;
    transition   : transform 400ms cubic-bezier(.4, 0, .2, 1);
}

.wpvs-card:hover .wpvs-card__thumb {
    transform: scale(1.05);
}

/* "Visualizar" CTA — appears on hover */
.wpvs-card__cta {
    position      : absolute;
    bottom        : 12px;
    left          : 12px;
    display       : inline-flex;
    align-items   : center;
    gap           : 6px;
    background    : rgba(255,255,255,.96);
    backdrop-filter: blur(4px);
    border        : none;
    border-radius : var(--wpvs-radius-pill);
    padding       : 8px 16px;
    font-size     : 13px;
    font-weight   : 600;
    color         : var(--wpvs-text);
    font-family   : var(--wpvs-font);
    cursor        : pointer;
    text-decoration: none;
    box-shadow    : 0 2px 12px rgba(0,0,0,.14);
    white-space   : nowrap;
    opacity       : 0;
    transform     : translateY(6px);
    transition    : opacity 220ms ease, transform 220ms ease;
    pointer-events: none;
}

.wpvs-card__cta svg {
    width     : 14px;
    height    : 14px;
    flex-shrink: 0;
    opacity   : .6;
}

.wpvs-card:hover .wpvs-card__cta {
    opacity       : 1;
    transform     : translateY(0);
    pointer-events: auto;
}

.wpvs-card__name {
    font-size   : 14px;
    font-weight : 400;
    color       : var(--wpvs-text);
    font-family : var(--wpvs-font);
    white-space : nowrap;
    overflow    : hidden;
    text-overflow: ellipsis;
}

.wpvs-card__price {
    font-size  : 13px;
    color      : var(--wpvs-muted);
    font-family: var(--wpvs-font);
}

/* ── Spinner ── */
.wpvs-spinner {
    width   : 32px;
    height  : 32px;
    border  : 3px solid var(--wpvs-border);
    border-top-color: var(--wpvs-text);
    border-radius: 50%;
    margin  : 48px auto;
    animation: wpvs-spin .7s linear infinite;
}

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

/* ── Pagination ── */
.wpvs-results__pagination {
    display   : flex;
    gap       : 6px;
    flex-wrap : wrap;
    margin-top: 28px;
}

.wpvs-page-btn {
    width        : 36px;
    height       : 36px;
    border-radius: var(--wpvs-radius-sm);
    border       : 1.5px solid var(--wpvs-border);
    background   : transparent;
    font-size    : 14px;
    font-family  : var(--wpvs-font);
    color        : var(--wpvs-text);
    cursor       : pointer;
    display      : inline-flex;
    align-items  : center;
    justify-content: center;
    transition   : background var(--wpvs-transition), border-color var(--wpvs-transition), color var(--wpvs-transition);
}

.wpvs-page-btn:hover {
    background  : var(--wpvs-hover);
    border-color: transparent;
}

.wpvs-page-btn.is-current {
    background  : var(--wpvs-accent);
    border-color: var(--wpvs-accent);
    color       : #fff;
}

.wpvs-page-btn:disabled {
    opacity       : .35;
    cursor        : default;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════════════ */

.wpvs-sidebar {
    width      : 200px;
    flex-shrink: 0;
    padding-top: 4px;
}

.wpvs-sidebar__heading {
    font-size   : 17px;
    font-weight : 700;
    letter-spacing: -.2px;
    color       : var(--wpvs-text);
    font-family : var(--wpvs-font);
    margin-bottom: 12px;
}

.wpvs-sidebar__heading[hidden] { display: none; }

.wpvs-sidebar__list {
    list-style: none;
    display   : flex;
    flex-direction: column;
    gap       : 0;
}

.wpvs-sidebar__item {
    font-size   : 15px;
    color       : var(--wpvs-text);
    font-family : var(--wpvs-font);
    padding     : 7px 10px;
    border-radius: var(--wpvs-radius-sm);
    cursor      : pointer;
    user-select : none;
    transition  : background var(--wpvs-transition), font-weight 0ms;
    border-left : 2px solid transparent;
}

.wpvs-sidebar__item:hover {
    background: var(--wpvs-hover);
}

.wpvs-sidebar__item.is-active {
    font-weight : 600;
    border-left-color: var(--wpvs-accent);
    background  : var(--wpvs-hover);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/*
 * ── MOBILE TRIGGER: icon-only ──────────────────────────────────────────────
 *
 * Abaixo de 768 px a barra de busca colapsa para um botão circular contendo
 * apenas a lupa. O modal continua funcionando normalmente ao clicar.
 *
 * Estratégia:
 *  1. Remove o texto placeholder (display:none no <span>).
 *  2. Zera gap e width automático para a pill encolher ao redor do ícone.
 *  3. Aplica padding igual em todos os lados e border-radius:50% → círculo.
 *  4. Garante que o ícone nunca encolha abaixo de 20 × 20 px.
 *
 * Nenhuma mudança de JS ou PHP é necessária — o click no botão já dispara
 * openModal() independentemente do estado visual.
 */
@media (max-width: 768px) {

    /* Colapsa para botão circular */
    .wpvs-bar {
        width         : 44px;          /* área de toque confortável (min 44px WCAG) */
        height        : 44px;
        min-width     : 0;
        max-width     : none;
        padding       : 0;
        gap           : 0;
        border-radius : 50%;
        justify-content: center;
        flex-shrink   : 0;
    }

    /* Esconde o texto do placeholder */
    .wpvs-bar__placeholder {
        display : none;
    }

    /* Ícone ligeiramente maior para melhor legibilidade no toque */
    .wpvs-bar__icon {
        width  : 20px;
        height : 20px;
    }

    /* Reset dos overrides de hover para o estado circular */
    .wpvs-bar:hover {
        border-radius : 50% !important;
    }
}

@media (max-width: 1100px) {
    .wpvs-results__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
    .wpvs-modal__inner    { padding: 28px 24px 60px; }
    .wpvs-modal__body     { flex-direction: column-reverse; gap: 32px; }
    .wpvs-sidebar         { width: 100%; }
    .wpvs-sidebar__list   { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .wpvs-sidebar__item   { border-left: none; border-bottom: 2px solid transparent; }
    .wpvs-sidebar__item.is-active { border-bottom-color: var(--wpvs-accent); }
    .wpvs-results__grid   { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .wpvs-modal__inner  { padding: 20px 16px 48px; }
    .wpvs-results__grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
}

/* ── Accessibility: reduced motion ── */
@media (prefers-reduced-motion: reduce) {
    .wpvs-modal:not([hidden]),
    .wpvs-modal.is-closing,
    .wpvs-card,
    .wpvs-card__thumb,
    .wpvs-card__cta {
        animation : none;
        transition: none;
    }
}