/* Premium search bar (owner, Nov 2026): one look on computers (#search2) and phones (#search3).
   A soft white pill on the coloured header, a round gradient search button inside it, and the
   "Popular searches" as chips in a floating card. Loaded last in frontend/partials/head. */

#search2, #search3 {
    width: 100% !important; height: 44px !important; margin: 0 !important;
    padding: 0 60px 0 22px !important;
    border: 0 !important; border-radius: 999px !important;
    background: #fff !important; color: #1d1d29 !important;
    font-size: 14.5px !important; font-weight: 500; letter-spacing: .01em;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .55), 0 10px 26px -12px rgba(25, 10, 70, .55), inset 0 1px 2px rgba(25, 10, 70, .06) !important;
    transition: box-shadow .2s ease;
    -webkit-appearance: none; appearance: none;
}
#search2:focus, #search3:focus {
    outline: 0 !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, .38), 0 14px 32px -12px rgba(25, 10, 70, .6) !important;
}
#search2::placeholder, #search3::placeholder { color: #8b8fa3 !important; font-weight: 400; opacity: 1; }
#search2::-webkit-search-cancel-button, #search3::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

/* the button: a round gradient pill sitting inside the right end of the bar */
.axil-search > button.wooc-btn-search {
    position: absolute !important; left: auto !important; right: 4px !important; top: 50% !important;
    transform: translateY(-50%) !important; z-index: 2;
    width: 50px !important; height: 36px !important; min-width: 0; padding: 0 !important; margin: 0 !important;
    display: grid !important; place-items: center;
    border: 0 !important; border-radius: 999px !important;
    background: linear-gradient(110deg, var(--primary-color, #e8126f), var(--secondary-color, #6b2bd9)) !important;
    color: #fff !important; font-size: 14px !important; line-height: 1;
    box-shadow: 0 6px 14px -6px var(--primary-color, #e8126f);
    transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
    cursor: pointer;
}
.axil-search > button.wooc-btn-search i { color: #fff !important; font-size: 14px !important; margin: 0 !important; }
.axil-search > button.wooc-btn-search:hover { filter: brightness(1.08); box-shadow: 0 8px 18px -6px var(--primary-color, #e8126f); }
.axil-search > button.wooc-btn-search:active { transform: translateY(-50%) scale(.94) !important; }

/* "Popular searches" — a floating card with chips */
.axil-search .suggest-box {
    top: calc(100% + 8px) !important; left: 0; right: 0;
    padding: 14px 14px 12px !important;
    border: 0 !important; border-radius: 16px !important; background: #fff !important;
    box-shadow: 0 22px 50px -14px rgba(25, 10, 70, .38), 0 0 0 1px rgba(25, 10, 70, .05) !important;
    animation: spDrop .16s ease-out;
}
@keyframes spDrop { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.axil-search .suggest-box ul { display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 !important; padding: 0 !important; }
.axil-search .suggest-box ul small {
    flex-basis: 100%; margin-bottom: 2px;
    font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b8fa3;
}
.axil-search .suggest-box li { margin: 0 !important; padding: 0 !important; background: none !important; }
.axil-search .suggest-box li a {
    display: inline-flex !important; align-items: center; gap: 2px;
    padding: 7px 13px; border-radius: 999px;
    background: #f3f3f8; color: #2a2a38 !important; font-size: 12.5px !important; font-weight: 500; line-height: 1.2;
    transition: background .15s, color .15s;
}
.axil-search .suggest-box li a i { font-size: 10px; color: var(--primary-color, #e8126f); }
.axil-search .suggest-box li a:hover { background: color-mix(in srgb, var(--primary-color, #e8126f) 10%, #fff); color: var(--primary-color, #e8126f) !important; }

/* phones: a little lower bar, a round button */
@media (max-width: 991.98px) {
    #search3 { height: 42px !important; padding-left: 18px !important; padding-right: 52px !important; font-size: 14px !important; }
    .axil-search > button.wooc-btn-search { width: 36px !important; height: 34px !important; right: 4px !important; }
    .axil-search .suggest-box li a { padding: 6px 11px; font-size: 12px !important; }
}

/* dark mode */
[data-theme="dark"] #search2, [data-theme="dark"] #search3 { background: #1b2027 !important; color: #eceef3 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, .12), 0 10px 26px -12px rgba(0, 0, 0, .7) !important; }
[data-theme="dark"] .axil-search .suggest-box { background: #1b2027 !important; }
[data-theme="dark"] .axil-search .suggest-box li a { background: #262c35; color: #e3e6ec !important; }

/* Live suggestions while typing (App\Support\SearchSuggest + public/frontend/js/search-suggest.js) */
.ss-box {
    position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 1000;
    max-height: min(70vh, 560px); overflow-y: auto; overscroll-behavior: contain;
    padding: 8px; border-radius: 16px; background: #fff; text-align: left;
    box-shadow: 0 22px 50px -14px rgba(25, 10, 70, .38), 0 0 0 1px rgba(25, 10, 70, .05);
    animation: spDrop .14s ease-out;
}
.ss-box[hidden] { display: none; }
.ss-head { padding: 10px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8b8fa3; }
.ss-note, .ss-none { padding: 10px 12px 4px; font-size: 12.5px; color: #6b7083; }
.ss-item {
    display: flex !important; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 10px;
    color: #1d1d29 !important; text-decoration: none !important; font-size: 14px; line-height: 1.3;
}
.ss-item:hover, .ss-item.is-on { background: color-mix(in srgb, var(--primary-color, #e8126f) 7%, #fff); }
.ss-ph { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: #f3f3f8; }
.ss-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ss-ic { flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: #f3f3f8; color: #6b7083; font-size: 15px; }
.ss-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ss-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #4a4d5c; }
.ss-n mark { background: none; padding: 0; color: #111; font-weight: 700; }
.ss-sub { font-size: 12px; color: #8b8fa3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-pr { flex: none; font-size: 13px; font-weight: 700; color: var(--primary-color, #e8126f); }
.ss-pr.ss-out { color: #8b8fa3; font-weight: 500; font-size: 12px; }
.ss-all { margin-top: 4px; border-top: 1px solid #eef0f4; border-radius: 0 0 10px 10px; color: var(--primary-color, #e8126f) !important; }
.ss-all .ss-ic { background: color-mix(in srgb, var(--primary-color, #e8126f) 10%, #fff); color: var(--primary-color, #e8126f); }
.ss-all b { color: #1d1d29; }
@media (max-width: 991.98px) { .ss-box { max-height: 65vh; } .ss-item { font-size: 13.5px; } }
[data-theme="dark"] .ss-box { background: #1b2027; }
[data-theme="dark"] .ss-item { color: #e3e6ec !important; }
[data-theme="dark"] .ss-n { color: #c3c7d1; } [data-theme="dark"] .ss-n mark { color: #fff; }
[data-theme="dark"] .ss-item:hover, [data-theme="dark"] .ss-item.is-on, [data-theme="dark"] .ss-ic, [data-theme="dark"] .ss-ph { background: #262c35; }