/* ─── Frontend Styles — OCTOS Consultor Planilha ───────────────────────── */

/*
 * Todas as cores, dimensões e raios são controlados por CSS custom properties.
 * Os valores padrão abaixo refletem o preset "default" (azul WordPress).
 * As propriedades são sobrescritas por um <style> inline gerado pelo PHP
 * (WSL_Style_Presets::to_css_vars) escopado ao ID único de cada widget.
 * Isso permite múltiplos widgets com estilos independentes na mesma página.
 */

.wsl-lookup-widget {
    /* ── Defaults do preset "default" ── */
    --wsl-primary:         #2271b1;
    --wsl-border:          #ccd0d4;
    --wsl-bg:              #ffffff;
    --wsl-text:            #1d2327;
    --wsl-placeholder:     #a7aaad;
    --wsl-hover-bg:        #f0f6fc;
    --wsl-radius:          6px;
    --wsl-font-size:       16px;
    --wsl-max-width:       480px;
    --wsl-found-bg:        #edfaef;
    --wsl-found-border:    #00a32a;
    --wsl-found-color:     #1e4620;
    --wsl-notfound-bg:     #fcf0f1;
    --wsl-notfound-border: #d63638;
    --wsl-notfound-color:  #691c1c;

    position: relative;
    max-width: var(--wsl-max-width);
    font-family: inherit;
    font-size: var(--wsl-font-size);
}

/* Wrapper do input */
.wsl-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.wsl-input {
    width: 100%;
    padding: 10px 42px 10px 14px;
    font-size: var(--wsl-font-size);
    border: 2px solid var(--wsl-border);
    border-radius: var(--wsl-radius);
    outline: none;
    background: var(--wsl-bg);
    color: var(--wsl-text);
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    appearance: none;
}

.wsl-input:focus {
    border-color: var(--wsl-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--wsl-primary) 20%, transparent);
}

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

/* Botão de limpar */
.wsl-clear-btn {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: #787c82;
    font-size: 20px;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

.wsl-clear-btn:hover {
    color: var(--wsl-notfound-border);
}

/* Spinner de carregamento */
.wsl-spinner {
    position: absolute;
    right: 12px;
    width: 18px;
    height: 18px;
    border: 2px solid #e0e0e0;
    border-top-color: var(--wsl-primary);
    border-radius: 50%;
    animation: wsl-spin 0.6s linear infinite;
}

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

/* Lista de sugestões */
.wsl-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--wsl-bg);
    border: 1px solid var(--wsl-border);
    border-radius: var(--wsl-radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    z-index: 9999;
    list-style: none;
    margin: 0;
    padding: 4px 0;
    max-height: 280px;
    overflow-y: auto;
}

.wsl-suggestions li {
    padding: 10px 14px;
    cursor: pointer;
    color: var(--wsl-text);
    font-size: var(--wsl-font-size);
    background: var(--wsl-bg);
    transition: background 0.1s;
    list-style: none;
}

.wsl-suggestions li:hover,
.wsl-suggestions li[aria-selected="true"] {
    background: var(--wsl-hover-bg);
    color: var(--wsl-primary);
}

.wsl-suggestions li mark {
    background: #fff3cd;
    color: inherit;
    font-style: normal;
    border-radius: 2px;
    padding: 0 1px;
}

.wsl-suggestions li.wsl-no-results {
    color: #787c82;
    font-style: italic;
    cursor: default;
}

.wsl-suggestions li.wsl-no-results:hover {
    background: none;
    color: #787c82;
}

/* Área de resultado / mensagem */
.wsl-result {
    margin-top: 12px;
    padding: 12px 16px;
    border-radius: var(--wsl-radius);
    font-size: var(--wsl-font-size);
    line-height: 1.5;
}

.wsl-result.found {
    background: var(--wsl-found-bg);
    border: 1px solid var(--wsl-found-border);
    color: var(--wsl-found-color);
}

.wsl-result.not-found {
    background: var(--wsl-notfound-bg);
    border: 1px solid var(--wsl-notfound-border);
    color: var(--wsl-notfound-color);
}

.wsl-result .wsl-result-value {
    font-weight: 600;
}

/* Responsividade */
@media (max-width: 480px) {
    .wsl-lookup-widget {
        max-width: 100%;
    }

    .wsl-input {
        font-size: 16px; /* Evita zoom automático no iOS */
    }
}

/* Acessibilidade: foco visível para navegação via teclado */
.wsl-suggestions li:focus-visible {
    outline: 2px solid var(--wsl-primary);
    outline-offset: -2px;
}