/* ================================================================
* Wolf Station — Global Search System (ws-search)
* File: public/css/main/shared/productSearch.css
* Single definition — loaded globally via sort.css chain
* ================================================================ */
/* ── Existing selectors (preserved, not touched) ── */
.visible-products-counter {
border-radius: 12px;
border-right: 4px solid #0dcaf0;
animation: slideDown 0.3s ease-out;
}
@keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.products-search-bar { position: relative; }
.products-search-input { transition: all 0.3s ease; }
.products-search-input:focus {
box-shadow: 0 0 0 3px rgba(13, 202, 240, 0.2);
border-color: #0dcaf0;
}
.product-card { transition: all 0.3s ease; animation: fadeIn 0.5s ease; }
.product-card.hidden { display: none !important; }
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.product-card.highlight-match { animation: highlightPulse 1.5s ease; }
@keyframes highlightPulse {
0% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0.4); }
50% { box-shadow: 0 0 0 10px rgba(13, 202, 240, 0); }
100% { box-shadow: 0 0 0 0 rgba(13, 202, 240, 0); }
}
/* ================================================================
* WS-SEARCH DESIGN SYSTEM — Wolf Station Premium
*
* Utility classes (single definition, defined here):
* .ws-search-wrap — container / pill wrapper
* .ws-search — the element
* .ws-search-icon — optional icon inside the wrap
*
* Scoped fallback (covers .products-search-input inside known wrappers):
* .products-search-bar .products-search-input
* .search-form input[type="text"]
* .fav-toolbar input[type="text"]
*
* NO !important used (Bootstrap overrides handled via specificity scoping)
* ================================================================ */
/* ── Wrap / container ───────────────────────────── */
.ws-search-wrap {
display: flex;
align-items: center;
gap: 10px;
background: rgba(8, 8, 10, 0.75);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
padding: 0 20px;
height: 52px;
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
box-shadow:
0 0 0 1px rgba(0,0,0,0.45) inset,
0 8px 28px rgba(0, 0, 0, 0.45),
0 0 18px rgba(212, 175, 55, 0.06);
transition: box-shadow 0.3s, border-color 0.3s;
}
.ws-search-wrap:focus-within {
border-color: rgba(212, 175, 55, 0.55);
box-shadow:
0 0 0 1px rgba(212, 175, 55, 0.25) inset,
0 8px 28px rgba(0, 0, 0, 0.55),
0 0 26px rgba(212, 175, 55, 0.15);
}
/* ── Input ──────────────────────────────────────── */
.ws-search {
flex-grow: 1;
height: 100%;
background: transparent;
border: none;
outline: none;
box-shadow: none;
color: #ffffff;
font-size: 0.95rem;
direction: rtl;
text-align: right;
font-family: inherit;
padding: 0;
}
.ws-search::placeholder {
color: rgba(255, 255, 255, 0.30);
font-size: 0.9rem;
}
/* Bootstrap's .form-control overrides — scoped to wrap only */
.ws-search-wrap .ws-search.form-control,
.ws-search-wrap .ws-search {
background: transparent;
border: none;
box-shadow: none;
color: #ffffff;
}
.ws-search-wrap .ws-search.form-control:focus,
.ws-search-wrap .ws-search:focus {
background: transparent;
border: none;
box-shadow: none;
color: #ffffff;
outline: none;
}
/* ── Icon ───────────────────────────────────────── */
.ws-search-icon {
color: rgba(212, 175, 55, 0.45);
font-size: 0.95rem;
flex-shrink: 0;
pointer-events: none;
}
/* ================================================================
* SCOPED FALLBACK — Existing classes in known containers
* Covers pages where HTML won't be touched (search.blade.php etc.)
* Specificity: 2 classes → beats Bootstrap's 1-class form-control
* ================================================================ */
/* search.blade.php + Ar/En group pages */
.products-search-bar .products-search-input,
.products-search-bar .wolf-input-style {
background: rgba(8, 8, 10, 0.75);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
color: #ffffff;
padding: 12px 22px;
font-size: 0.95rem;
direction: rtl;
text-align: right;
transition: border-color 0.3s, box-shadow 0.3s;
box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}
.products-search-bar .products-search-input::placeholder,
.products-search-bar .wolf-input-style::placeholder {
color: rgba(255, 255, 255, 0.32);
}
.products-search-bar .products-search-input:focus,
.products-search-bar .wolf-input-style:focus {
outline: none;
border-color: rgba(212, 175, 55, 0.6);
box-shadow:
0 0 0 3px rgba(212, 175, 55, 0.12),
0 4px 16px rgba(0,0,0,0.4);
background: rgba(8, 8, 10, 0.85);
color: #ffffff;
}
/* fav.blade.php toolbar search */
.fav-toolbar .search-form {
display: flex;
align-items: center;
gap: 0;
background: rgba(8, 8, 10, 0.75);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
overflow: hidden;
padding: 0 4px 0 16px;
height: 46px;
transition: border-color 0.3s, box-shadow 0.3s;
}
.fav-toolbar .search-form:focus-within {
border-color: rgba(212, 175, 55, 0.55);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.10);
}
.fav-toolbar .search-form input[type="text"] {
flex-grow: 1;
background: transparent;
border: none;
outline: none;
box-shadow: none;
color: #ffffff;
font-size: 0.9rem;
direction: rtl;
text-align: right;
padding: 0 10px;
}
.fav-toolbar .search-form input[type="text"]::placeholder {
color: rgba(255, 255, 255, 0.30);
}
.fav-toolbar .search-form button {
display: flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: rgba(212, 175, 55, 0.15);
border: 1px solid rgba(212, 175, 55, 0.3);
border-radius: 50px;
color: #d4af37;
cursor: pointer;
transition: background 0.2s;
}
.fav-toolbar .search-form button:hover {
background: rgba(212, 175, 55, 0.28);
}
/* ── Responsive ───────────────────────────────── */
@media (max-width: 768px) {
.ws-search-wrap {
height: 46px;
padding: 0 16px;
border-radius: 14px;
}
.products-search-bar .products-search-input,
.products-search-bar .wolf-input-style {
padding: 10px 16px;
border-radius: 14px;
}
}