/* ===========================================
   SHOP SEARCH (ss-) — grouped autocomplete
   =========================================== */

.ss-wrap {
    position: relative;
    width: 100%;
}

/* Input */
.ss-input-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    transition: border-color .15s;
}
.ss-input-wrap:focus-within { border-color: #0baf9a; }
.ss-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 10px 14px;
    font-size: 14px;
    color: #333;
    background: transparent;
}
.ss-input::placeholder { color: #aaa; }
.ss-btn {
    border: none;
    background: #0baf9a;
    color: #fff;
    padding: 10px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
}
.ss-btn:hover { background: #099683; }
.ss-btn svg { width: 18px; height: 18px; }

/* Dropdown */
.ss-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,.1);
    z-index: 1060;
    max-height: 460px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.ss-dropdown.show { display: block; }
.ss-dropdown::-webkit-scrollbar { width: 4px; }
.ss-dropdown::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }

/* Section headers */
.ss-section-label {
    padding: 8px 14px 4px;
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Section divider */
.ss-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 4px 0;
}

/* Category item */
.ss-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
    transition: background .1s;
    cursor: pointer;
}
.ss-cat:hover,
.ss-cat.ss-active { background: #f5f5f5; }

.ss-cat-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    object-fit: cover;
    background: #f0f0f0;
    flex-shrink: 0;
}
.ss-cat-icon-placeholder {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
    font-size: 13px;
}
.ss-cat-info { flex: 1; min-width: 0; }
.ss-cat-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    line-height: 1.3;
}
.ss-cat-title mark {
    background: rgba(11,175,154,.15);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.ss-cat-count {
    font-size: 11px;
    color: #aaa;
    flex-shrink: 0;
}

/* Product item */
.ss-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    text-decoration: none;
    color: #333;
    transition: background .1s;
    cursor: pointer;
}
.ss-item:hover,
.ss-item.ss-active { background: #f5f5f5; }

.ss-item-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    background: #f8f8f8;
    flex-shrink: 0;
}
.ss-item-img-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
    font-size: 16px;
}
.ss-item-info { flex: 1; min-width: 0; }
.ss-item-title {
    font-size: 13px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}
.ss-item-title mark {
    background: rgba(11,175,154,.15);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.ss-item-cat {
    font-size: 11px;
    color: #999;
    line-height: 1.3;
}
.ss-item-price {
    font-size: 13px;
    font-weight: 600;
    color: #0baf9a;
    white-space: nowrap;
    flex-shrink: 0;
}

/* View all link */
.ss-all {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    color: #0baf9a;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    transition: background .1s;
}
.ss-all:hover { background: #f8f8f8; color: #099683; }

/* No results */
.ss-empty {
    padding: 24px 14px;
    text-align: center;
    font-size: 13px;
    color: #999;
}

/* Loading dots */
.ss-loading { padding: 20px; text-align: center; }
.ss-dots { display: inline-flex; gap: 4px; }
.ss-dots span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #ccc;
    animation: ss-bounce .6s alternate infinite;
}
.ss-dots span:nth-child(2) { animation-delay: .15s; }
.ss-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ss-bounce { to { background: #0baf9a; transform: translateY(-4px); } }

/* ===========================================
   SEARCH RESULTS PAGE (sr-)
   =========================================== */

.sr-search-wrap { max-width: 640px; margin: 0 auto 32px; }
.sr-search-box {
    display: flex; align-items: center; background: #fff;
    border: 2px solid #e8e8e8; border-radius: 12px; padding: 4px;
    transition: border-color .2s;
}
.sr-search-box:focus-within { border-color: #0baf9a; }
.sr-search-icon { padding: 0 12px; color: #bbb; font-size: 16px; flex-shrink: 0; }
.sr-search-input {
    flex: 1; border: none; outline: none; padding: 12px 0;
    font-size: 16px; color: #333; background: transparent;
}
.sr-search-input::placeholder { color: #bbb; }
.sr-search-clear {
    border: none; background: none; color: #bbb; padding: 8px;
    cursor: pointer; font-size: 14px; flex-shrink: 0; transition: color .15s;
}
.sr-search-clear:hover { color: #666; }
.sr-search-btn {
    padding: 10px 24px; border: none; border-radius: 8px;
    background: #0baf9a; color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; flex-shrink: 0; transition: background .15s;
}
.sr-search-btn:hover { background: #099683; }

/* Results header */
.sr-results-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid #eee;
}
.sr-results-text { font-size: 15px; color: #555; }
.sr-results-text strong { color: #222; }
.sr-results-count { font-size: 13px; color: #0baf9a; font-weight: 600; }

/* Empty state */
.sr-empty { text-align: center; padding: 60px 20px; }
.sr-empty-icon {
    width: 80px; height: 80px; margin: 0 auto 20px; background: #f5f5f5;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.sr-empty-icon i { font-size: 28px; color: #ccc; }
.sr-empty-title { font-size: 18px; font-weight: 600; color: #333; margin-bottom: 4px; }
.sr-empty-query { font-size: 16px; color: #0baf9a; font-weight: 500; margin-bottom: 8px; }
.sr-empty-hint { font-size: 14px; color: #999; margin-bottom: 24px; }
.sr-empty-btn {
    border: 1px solid #ddd; border-radius: 8px; color: #555;
    font-size: 13px; padding: 8px 20px; text-decoration: none; transition: all .15s;
}
.sr-empty-btn:hover { border-color: #0baf9a; color: #0baf9a; }

@media (max-width: 575.98px) {
    .sr-results-header { flex-direction: column; align-items: flex-start; gap: 4px; }
    .sr-search-btn { padding: 10px 16px; font-size: 13px; }
}

/* ===========================================
   SEARCH MODAL (sm-)
   =========================================== */

.sm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(255,255,255,.97);
    z-index: 1070;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sm-overlay.show { display: block; }

.sm-container {
    max-width: 680px;
    margin: 0 auto;
    padding: 20px;
}

/* Close button */
.sm-close {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}
.sm-close-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    color: #666;
    transition: background .15s;
}
.sm-close-btn:hover { background: #e0e0e0; }

/* Search input inside modal */
.sm-input-wrap {
    display: flex;
    align-items: center;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 8px;
    transition: border-color .2s;
}
.sm-input-wrap:focus-within { border-color: #0baf9a; }
.sm-input-icon {
    padding: 0 12px;
    color: #bbb;
    font-size: 18px;
    flex-shrink: 0;
}
.sm-input {
    flex: 1;
    border: none;
    outline: none;
    padding: 14px 0;
    font-size: 18px;
    color: #333;
    background: transparent;
}
.sm-input::placeholder { color: #bbb; }
.sm-clear {
    border: none;
    background: none;
    color: #bbb;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 16px;
    flex-shrink: 0;
    transition: color .15s;
    display: none;
}
.sm-clear.show { display: block; }
.sm-clear:hover { color: #666; }

/* Results inside modal */
.sm-results {
    margin-top: 8px;
}

/* Section label */
.sm-section-label {
    padding: 12px 0 6px;
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

/* Divider */
.sm-divider {
    height: 1px;
    background: #f0f0f0;
    margin: 6px 0;
}

/* Category item */
.sm-cat {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 8px;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: background .1s;
}
.sm-cat:hover { background: #f5f5f5; }
.sm-cat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    object-fit: cover;
    background: #f0f0f0;
    flex-shrink: 0;
}
.sm-cat-icon-ph {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
    font-size: 14px;
}
.sm-cat-info { flex: 1; }
.sm-cat-title { font-size: 14px; font-weight: 500; color: #333; }
.sm-cat-title mark { background: rgba(11,175,154,.15); color: inherit; padding: 0 1px; border-radius: 2px; }
.sm-cat-count { font-size: 12px; color: #bbb; flex-shrink: 0; }

/* Product item */
.sm-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 8px;
    text-decoration: none;
    color: #333;
    border-radius: 8px;
    transition: background .1s;
}
.sm-item:hover { background: #f5f5f5; }
.sm-item-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    object-fit: cover;
    background: #f8f8f8;
    flex-shrink: 0;
}
.sm-item-img-ph {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ccc;
    font-size: 18px;
}
.sm-item-info { flex: 1; min-width: 0; }
.sm-item-title {
    font-size: 14px;
    font-weight: 500;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sm-item-title mark { background: rgba(11,175,154,.15); color: inherit; padding: 0 1px; border-radius: 2px; }
.sm-item-cat { font-size: 12px; color: #999; }
.sm-item-price { font-size: 14px; font-weight: 600; color: #0baf9a; white-space: nowrap; flex-shrink: 0; }

/* View all link */
.sm-all {
    display: block;
    padding: 14px 8px;
    font-size: 14px;
    font-weight: 500;
    color: #0baf9a;
    text-decoration: none;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    margin-top: 8px;
    border-radius: 8px;
    transition: background .1s;
}
.sm-all:hover { background: #f5f5f5; }

/* Empty */
.sm-empty {
    text-align: center;
    padding: 40px 0;
    color: #999;
    font-size: 14px;
}

/* Loading */
.sm-loading { padding: 30px; text-align: center; }

/* Hint text */
.sm-hint {
    text-align: center;
    padding: 40px 0;
    color: #bbb;
    font-size: 14px;
}
.sm-hint i { font-size: 32px; display: block; margin-bottom: 12px; color: #ddd; }
