/* ╔══════════════════════════════════════════════╗
   ║  JJW SEARCH DRAWER  v3.0 — Playful Light      ║
   ╚══════════════════════════════════════════════╝ */

.jd-search__form {
    display:flex; align-items:center; padding:0 24px; margin-bottom:16px; position:relative;
}
.jd-search__input {
    width:100%; height:48px;
    background:var(--jj-white); border:2px solid var(--jj-border);
    border-radius:var(--jj-radius); color:var(--jj-text);
    font-family:var(--jj-font); font-size:14px;
    padding:0 40px 0 16px; outline:none;
    transition:border-color 0.3s ease, box-shadow 0.3s ease;
}
.jd-search__input:focus { border-color:var(--jj-blue); box-shadow:0 0 0 3px var(--jj-blue-light); }
.jd-search__input::placeholder { color:var(--jj-text-faint); }

.jd-search__clear {
    position:absolute; right:32px; top:50%; transform:translateY(-50%);
    background:var(--jj-pink-light); border:none; border-radius:50%;
    width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    color:var(--jj-pink); cursor:pointer; padding:0; outline:none;
    transition:all 0.25s var(--jj-ease);
}
.jd-search__clear:hover { background:var(--jj-pink); color:#fff; transform:translateY(-50%) scale(1.1); }
.jd-search__clear svg { display:block; stroke:currentColor; fill:none; }

.jd-search__status {
    padding:0 24px 12px;
    font-family:var(--jj-font); font-size:12px; color:var(--jj-text-light);
    display:flex; align-items:center; gap:8px;
}
.jd-search__spinner {
    width:14px; height:14px;
    border:2px solid var(--jj-blue-light); border-top-color:var(--jj-pink);
    border-radius:50%; display:none;
}
.jd-search__status.is-loading .jd-search__spinner { display:block; animation:jj-spin 0.7s linear infinite; }

.jd-search__results-wrap {
    flex:1; overflow-y:auto; padding:0 24px;
    scrollbar-width:thin; scrollbar-color:rgba(0,0,0,0.06) transparent;
}

.jd-search__default, .jd-search__no-results { display:none; }
.jd-search__default.is-visible, .jd-search__no-results.is-visible { display:block; }

.jd-search__section-label, .jd-search__featured-label {
    font-family:var(--jj-font); font-size:12px; font-weight:700;
    color:var(--jj-text-light); display:block; margin-bottom:12px;
}
.jd-search__no-heading {
    font-family:var(--jj-font); font-size:15px; font-weight:700;
    color:var(--jj-text); margin:0 0 6px;
}
.jd-search__no-sub {
    font-family:var(--jj-font); font-size:13px;
    color:var(--jj-text-light); margin:0 0 20px;
}

/* Quick links (Browse) */
.jd-search__quick-links { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:8px; }
.jd-search__quick-link {
    display:inline-block; padding:8px 16px;
    font-family:var(--jj-font); font-size:13px; font-weight:700;
    color:var(--jj-blue); text-decoration:none;
    background:var(--jj-blue-light); border-radius:var(--jj-radius-pill);
    transition:all 0.25s var(--jj-ease);
}
.jd-search__quick-link:hover { background:var(--jj-blue); color:#fff; box-shadow:var(--jj-shadow-blue); }

/* Results */
.jd-search__results-list { list-style:none; margin:0; padding:0; }
.jd-search__result-item { border-bottom:1px solid var(--jj-border); }
.jd-search__result-item:last-child { border-bottom:none; }
.jd-search__result-link {
    display:flex; align-items:center; gap:14px;
    padding:12px 0; text-decoration:none;
    transition:background 0.2s ease;
    border-radius:var(--jj-radius-sm);
}
.jd-search__result-link:hover { background:var(--jj-blue-light); margin:0 -8px; padding:12px 8px; }
.jd-search__result-img {
    width:48px; height:48px; border-radius:var(--jj-radius-sm);
    object-fit:cover; flex-shrink:0; background:var(--jj-blue-light);
}
.jd-search__result-info { flex:1; min-width:0; }
.jd-search__result-name {
    display:block; font-family:var(--jj-font); font-size:14px; font-weight:700;
    color:var(--jj-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.jd-search__result-cat {
    display:block; font-family:var(--jj-font); font-size:11px;
    color:var(--jj-text-light); margin-top:2px;
}

/* View all */
.jd-search__view-all {
    display:inline-flex; align-items:center; gap:6px;
    font-family:var(--jj-font); font-size:13px; font-weight:700;
    color:var(--jj-blue); text-decoration:none;
    padding:14px 0; transition:color 0.2s ease;
}
.jd-search__view-all:hover { color:var(--jj-pink); }
.jd-search__view-all svg { display:block; stroke:currentColor; fill:none; }

.jd-search__featured-grid { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.jd-search__featured-grid li a {
    display:flex; flex-direction:column; gap:8px;
    padding:10px; background:var(--jj-white); border:1px solid var(--jj-border);
    border-radius:var(--jj-radius-sm); text-decoration:none;
    transition:all 0.25s var(--jj-ease);
}
.jd-search__featured-grid li a:hover { border-color:var(--jj-blue); box-shadow:var(--jj-shadow); }
.jd-search__featured-grid img { width:100%; aspect-ratio:1; object-fit:cover; border-radius:6px; }
.jd-search__featured-grid span {
    font-family:var(--jj-font); font-size:12px; font-weight:700;
    color:var(--jj-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

@media (max-width:768px) {
    .jd-search__form { padding:0 16px; }
    .jd-search__status { padding:0 16px 10px; }
    .jd-search__results-wrap { padding:0 16px; }
}