/* ═══════════════════════════════════════════════════════════════
   WOOKIT CORE — Inputs
   Standard text input and search input variant.
   ═══════════════════════════════════════════════════════════════ */


/* ── Standard input ──────────────────────────────────────────── */
.wookit-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid var(--wookit-border-input);
    border-radius: var(--wookit-radius-sm);
    font-size: 14px;
    font-family: var(--wookit-font);
    color: var(--wookit-text);
    background: var(--wookit-surface);
    transition: border-color .2s ease, box-shadow .2s ease;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}
.wookit-input:focus {
    border-color: var(--wookit-accent);
    box-shadow: 0 0 0 3px var(--wookit-accent-soft);
}
.wookit-input::placeholder { color: var(--wookit-muted); font-size: 13px; }
.wookit-input--error {
    border-color: var(--wookit-danger) !important;
    box-shadow: 0 0 0 3px var(--wookit-danger-soft) !important;
}
.wookit-input-error {
    font-size: 12px;
    color: var(--wookit-danger-text);
    display: block;
    margin-top: 4px;
    font-family: var(--wookit-font);
}


/* ── Search input wrap ───────────────────────────────────────── */
.wookit-input-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--wookit-surface-alt);
    border-bottom: 1px solid var(--wookit-border);
}
.wookit-input-search-icon { color: var(--wookit-muted); flex-shrink: 0; }
.wookit-input-search {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-size: 14px;
    font-family: var(--wookit-font);
    color: var(--wookit-text);
    -webkit-appearance: none;
    appearance: none;
}
.wookit-input-search::placeholder { color: var(--wookit-muted); font-size: 13px; }
.wookit-input-search::-webkit-search-cancel-button { display: none; }