/* ================================================================
   FEF SEARCH WIDGET — Styles
   ================================================================ */
.fef-search-wrap { position: relative; display: inline-block; width: 100%; }

/* ── Search Bar ── */
.fef-search-bar {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: visible;
    transition: border-color 0.2s, box-shadow 0.2s;
    position: relative;
}
.fef-search-bar:focus-within {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}

/* ── Input ── */
.fef-search-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 15px;
    padding: 12px 16px;
    color: #1e293b;
    min-width: 0;
    width: 100%;
}
.fef-search-input::placeholder { color: #94a3b8 !important; opacity: 1 !important; }
/* Placeholder horizontal/vertical offset via CSS vars set by Elementor */
.fef-search-input {
    --fef-ph-pad-h: 0px;
    --fef-ph-pad-v: 0px;
    text-indent: var(--fef-ph-pad-h);
}
/* Vertical offset uses a pseudo-technique: we shift the entire input's padding-top */
/* Since ::placeholder can't have its own padding, we use the input's text-indent for horizontal */

/* ── Input Icon — overlaps input ── */
.fef-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
    font-size: 16px;
    flex-shrink: 0;
    z-index: 2;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.fef-search-icon-left { left: 12px; }
.fef-search-icon-right { right: 12px; }
/* When icon is left, push input text right to avoid overlap */
.fef-search-bar:has(.fef-search-icon-left) .fef-search-input { padding-left: 40px; }
/* When icon is right and no button, push input text left */
.fef-search-bar:has(.fef-search-icon-right) .fef-search-input { padding-right: 40px; }

/* ── Search Button ── */
.fef-search-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 20px;
    height: 100%;
    background: #1e293b;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    transition: background 0.2s;
}
.fef-search-btn:hover { background: #334155; }
.fef-search-btn i { font-size: 14px; }

/* ── Icon Trigger (Icon-only mode) ── */
.fef-search-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    cursor: pointer;
    color: #1e293b;
    font-size: 18px;
    transition: all 0.2s;
    --fef-trig-x: 0px;
    --fef-trig-y: 0px;
    transform: translate(var(--fef-trig-x), var(--fef-trig-y));
}
.fef-search-trigger:hover { background: #e2e8f0; }

/* ── Elementor Editor — dropdown shows on trigger click ── */
.fef-search-editor .fef-search-dd-editor { position: relative; }
.fef-search-expand {
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 9999;
    width: 380px;
    margin-top: 8px;
    animation: fefSearchExpand 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes fefSearchExpand {
    from { opacity: 0; transform: translateY(-8px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Dropdown ── */
.fef-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-top: none;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    max-height: 420px;
    overflow-y: auto;
    margin-top: -1px;
}
.fef-search-dropdown::-webkit-scrollbar { width: 5px; }
.fef-search-dropdown::-webkit-scrollbar-track { background: #f8fafc; }
.fef-search-dropdown::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* ── Loading ── */
.fef-search-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: #94a3b8;
    font-size: 13px;
    gap: 8px;
}
.fef-search-loading .fef-search-spinner {
    width: 16px; height: 16px;
    border: 2px solid #e2e8f0;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: fefSearchSpin 0.6s linear infinite;
}
@keyframes fefSearchSpin { to { transform: rotate(360deg); } }

/* ── Result Item ── */
.fef-search-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}
.fef-search-item:last-child { border-bottom: none; }
.fef-search-item:hover { background: #f8fafc; }

/* Thumbnail */
.fef-search-item-thumb {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fef-search-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.fef-search-item-thumb-placeholder {
    color: #cbd5e1;
    font-size: 18px;
}

/* Content */
.fef-search-item-content {
    flex: 1;
    min-width: 0;
}
.fef-search-item-title {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fef-search-item-title mark {
    background: #fef3c7;
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.fef-search-item-excerpt {
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fef-search-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 3px;
}

/* Type Badge */
.fef-search-item-type {
    display: inline-block;
    padding: 1px 6px;
    font-size: 10px;
    font-weight: 600;
    border-radius: 3px;
    background: #eff6ff;
    color: #3b82f6;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Price */
.fef-search-item-price {
    font-size: 13px;
    font-weight: 700;
    color: #059669;
}
.fef-search-item-price del {
    color: #94a3b8;
    font-weight: 400;
    font-size: 11px;
    margin-right: 4px;
}

/* ── Add to Cart Button ── */
.fef-search-cart-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s;
    flex-shrink: 0;
}
.fef-search-cart-btn:hover { background: #059669; }
.fef-search-cart-btn i { font-size: 11px; }
.fef-search-cart-btn.added { background: #6366f1; }
.fef-search-cart-btn.added::after { content: ' ✓'; }

/* ── View All Link ── */
.fef-search-view-all {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    font-size: 13px;
    font-weight: 500;
    color: #3b82f6;
    border-top: 1px solid #e2e8f0;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
}
.fef-search-view-all:hover { background: #f8fafc; }
.fef-search-view-all i { margin-left: 6px; font-size: 11px; }

/* ── No Results ── */
.fef-search-no-results {
    padding: 24px 16px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.fef-search-no-results i {
    display: block;
    font-size: 28px;
    margin-bottom: 8px;
    color: #cbd5e1;
}

/* ── Group Headers (when multiple sources) ── */
.fef-search-group-header {
    padding: 6px 14px;
    font-size: 10px;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: #f8fafc;
    border-bottom: 1px solid #f1f5f9;
    position: sticky;
    top: 0;
    z-index: 1;
}

/* ── Mobile ── */
@media (max-width: 768px) {
    .fef-search-expand { width: calc(100vw - 32px); right: -16px; }
    .fef-search-btn span { display: none; }
}

/* ── Voice Button ── */
.fef-search-voice-btn{background:none;border:none;color:#999;cursor:pointer;font-size:18px;padding:6px;transition:color .2s;flex-shrink:0;display:flex;align-items:center}
.fef-search-voice-btn:hover{color:#c62828}
.fef-search-voice-btn.recording{color:#c62828;animation:fefVoicePulse 1s ease infinite}
.fef-search-voice-inside{position:relative;z-index:2}
.fef-search-voice-outside{margin-left:8px}
.fef-search-voice-outside_left{order:-1;margin-left:0;margin-right:8px}
@keyframes fefVoicePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}

/* ── Chips ── */
.fef-search-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fef-search-chip{display:inline-flex;align-items:center;padding:4px 12px;background:#f0f0f0;border-radius:14px;font-size:13px;color:#333;text-decoration:none;cursor:pointer;transition:all .15s}
.fef-search-chip:hover{background:#e0e0e0}

/* ── Typewriter ── */
.fef-search-input[data-typewriter]::placeholder{color:transparent}
.fef-search-typewriter-text{position:absolute;left:0;top:0;right:0;bottom:0;display:flex;align-items:center;padding-left:40px;font-size:14px;color:#999;pointer-events:none;overflow:hidden;white-space:nowrap}
.fef-search-typewriter-cursor{display:inline-block;width:1px;height:1.1em;background:#999;margin-left:1px;animation:fefBlink .8s step-end infinite}
@keyframes fefBlink{0%,100%{opacity:1}50%{opacity:0}}

/* ── Advanced Search ── */
.fef-search-advanced{margin-top:6px}
.fef-search-adv-below_left{text-align:left}
.fef-search-adv-below_right{text-align:right}
.fef-search-adv-below_center{text-align:center}
.fef-search-adv-link{font-size:12px;color:#1565c0;text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px}
.fef-search-adv-link:hover{text-decoration:underline}
.fef-search-adv-link i{font-size:10px;transition:transform .2s}
.fef-search-adv-link.open i{transform:rotate(180deg)}
.fef-search-adv-panel{padding:12px 0;border-top:1px solid #eee;margin-top:8px}
.fef-search-adv-distance{display:flex;flex-direction:column;gap:6px}
.fef-search-adv-distance label{font-size:12px;font-weight:600;color:#555}
.fef-search-adv-dist-val{font-size:13px;color:#333;font-weight:500}