/* EPro Smart Search – Frontend CSS | e-project.lt */

.epro-search-wrap { width:100%; max-width:680px; font-family:inherit; }

.epro-search-box {
    display:flex; align-items:center;
    background:rgba(255,255,255,0.10);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border:1.5px solid rgba(255,255,255,0.22); border-radius:14px;
    padding:6px 8px 6px 16px; gap:10px;
    box-shadow:0 8px 32px rgba(0,0,0,0.18),inset 0 1px 0 rgba(255,255,255,0.15);
    transition:border-color .25s,box-shadow .25s;
}
.epro-search-box:focus-within {
    border-color:rgba(255,255,255,0.55);
    box-shadow:0 8px 32px rgba(0,0,0,0.22),0 0 0 3px rgba(255,255,255,0.12),inset 0 1px 0 rgba(255,255,255,0.2);
}

/* Left decorative icon */
.epro-icon-wrap { flex-shrink:0; display:flex; align-items:center; color:rgba(255,255,255,0.60); }
.epro-icon-wrap svg { width:30px; height:30px; }

/* Input */
.epro-input {
    flex:1; background:transparent!important; border:none!important;
    outline:none!important; box-shadow:none!important;
    color:#fff!important; font-size:15px; padding:10px 0; min-width:0;
}
.epro-input::placeholder { color:rgba(255,255,255,0.42); }

/* ── Search button: ghost, white icon only ── */
.epro-search-btn {
    flex-shrink:0; width:48px; height:48px;
    background:transparent;
    border:none;
    border-radius:10px;
    color:#ffffff;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:background .2s, transform .15s;
    padding:0;
    opacity:0.85;
}
.epro-search-btn:hover {
    background:rgba(255,255,255,0.10);
    transform:scale(1.06);
    opacity:1;
}
.epro-search-btn:active { transform:scale(0.97); }

/* Button icon wrapper */
.epro-btn-icon { display:flex; align-items:center; justify-content:center; width:28px; height:28px; }
.epro-btn-icon svg { width:100%; height:100%; color:#ffffff; }

/* Loading state */
.epro-search-btn.epro-loading .epro-btn-icon { animation:epro-spin .7s linear infinite; }
.epro-search-btn.epro-loading svg            { animation:epro-spin .7s linear infinite; }

/* ── Animation classes (toggled per element via PHP) ── */
@keyframes epro-spin      { to { transform:rotate(360deg); } }
@keyframes epro-spin-slow { to { transform:rotate(360deg); } }
@keyframes epro-pulse-glow {
    0%,100% { box-shadow:0 4px 20px rgba(26,86,219,0.45); }
    50%      { box-shadow:0 4px 30px rgba(26,86,219,0.72),0 0 0 4px rgba(26,86,219,0.12); }
}
@keyframes epro-shimmer { to { left:100%; } }
@keyframes epro-fade-in {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* Applied when PHP adds class */
.epro-anim-spin      { animation:epro-spin-slow 6s linear infinite; }
.epro-icon-wrap.epro-anim-spin svg { animation:epro-spin-slow 8s linear infinite; }

/* ── Results area ── */
.epro-result-area { margin-top:12px; }

.epro-results-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; animation:epro-fade-in .3s ease; }

.epro-result-item {
    display:flex; align-items:center; gap:12px;
    background:rgba(255,255,255,0.10); backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,0.15); border-radius:10px;
    padding:10px 14px; text-decoration:none; color:#fff;
    transition:background .2s,transform .15s,border-color .2s;
}
.epro-result-item:hover { background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.35); transform:translateX(4px); color:#fff; text-decoration:none; }

.epro-result-thumb { width:40px; height:40px; border-radius:6px; object-fit:cover; flex-shrink:0; }
.epro-result-thumb-placeholder { width:40px; height:40px; border-radius:6px; background:rgba(255,255,255,0.1); display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.epro-result-info  { flex:1; min-width:0; }
.epro-result-title { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.epro-result-meta  { font-size:12px; color:rgba(255,255,255,0.6); margin-top:2px; }
.epro-result-price { font-size:13px; font-weight:700; color:#7dd3fc; flex-shrink:0; }
.epro-result-arrow { color:rgba(255,255,255,0.4); flex-shrink:0; }

/* ── Not found ── */
.epro-not-found { animation:epro-fade-in .35s ease; }
.epro-not-found-msg { font-size:13px; color:rgba(255,255,255,0.65); margin-bottom:10px; padding-left:2px; }

/* ── CTA contact button ── */
.epro-contact-btn {
    display:inline-flex; align-items:center; gap:10px;
    background:linear-gradient(135deg,var(--epro-primary,#1a56db) 0%,var(--epro-accent,#0e3fa8) 100%);
    color:var(--epro-btn-text,#ffffff)!important;
    border:none; border-radius:12px; padding:13px 22px;
    font-size:14px; font-weight:600; text-decoration:none!important; cursor:pointer;
    position:relative; overflow:hidden;
    box-shadow:0 4px 20px rgba(26,86,219,0.45);
    transition:transform .2s,box-shadow .2s;
}
.epro-contact-btn:hover { transform:translateY(-2px) scale(1.02); box-shadow:0 8px 28px rgba(26,86,219,0.65); color:var(--epro-btn-text,#ffffff)!important; }

/* Pulse – only when class present */
.epro-contact-btn.epro-anim-pulse { animation:epro-pulse-glow 2.5s ease-in-out infinite; }
.epro-contact-btn.epro-anim-pulse:hover { animation-play-state:paused; }

/* Shimmer – only when class present */
.epro-contact-btn.epro-has-shimmer::before {
    content:''; position:absolute; top:0; left:-100%;
    width:100%; height:100%;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.18),transparent);
    animation:epro-shimmer 2.2s linear infinite;
    pointer-events:none;
}

.epro-contact-btn-icon { flex-shrink:0; display:flex; }
.epro-contact-btn-icon svg { width:22px; height:22px; }
.epro-contact-btn-icon.epro-anim-spin { animation:epro-spin-slow 6s linear infinite; }
.epro-contact-btn-text { line-height:1.2; }

/* Error */
.epro-error-msg { font-size:13px; color:#fca5a5; padding:8px 12px; background:rgba(239,68,68,0.15); border-radius:8px; border:1px solid rgba(239,68,68,0.3); animation:epro-fade-in .3s ease; }