/* =============================================================================
 * search-enhance.css  -  styling for the voice-search mic button, the barcode
 * scan button, and the camera scan modal injected by search-enhance.js.
 * Loaded engine-wide from include/HEADER.ASP, gated by the merchant toggles.
 * Kept namespaced under .ss-se- so it cannot collide with template CSS.
 * ========================================================================== */

/* Overlay mode: the buttons sit at the input's right edge, inside its wrapper
 * <div> (which search-enhance.js makes position:relative if needed). This is the
 * modern search-box case (.large-search-box). */
.ss-se-tools {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    white-space: nowrap;
    pointer-events: auto;
}

/* Inline mode: legacy variants where the input sits directly in the form. The
 * buttons flow right after the (small) input instead of overlaying it. */
.ss-se-tools.ss-se-tools-inline {
    position: static;
    transform: none;
    vertical-align: middle;
    margin-left: 4px;
}

/* Overlay cluster: the store's own search/submit button, plus the mic and the
 * barcode button, laid out together at the right edge. search-enhance.js moves
 * the store's magnifier into this cluster (search icon first), so it shifts left
 * and the new tools sit to its right, with no overlap. Works desktop + mobile. */
.ss-se-cluster {
    display: inline-flex;
    align-items: center;
    gap: 2px;                    /* horizontal breathing room so icons aren't mis-tapped */
    position: absolute;
    top: 50%;                    /* JS overrides with an exact px value per input */
    right: 8px;
    transform: translateY(-50%);
    z-index: 3;
    white-space: nowrap;
    pointer-events: auto;
}

/* Wrapper used for non-pill overlay inputs (e.g. the advanced search page) so the
 * cluster centers on the field itself, not on a surrounding label + input block.
 * display:block keeps a full-width input full width. */
.ss-se-field {
    position: relative;
    display: block;
}
/* The store's magnifier/submit control, once moved into the cluster: strip the
 * absolute positioning the template gave it so it flows inline in the row. */
.ss-se-submit-moved {
    position: static !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    margin: 0 !important;
}
/* The store's search magnifier is a raster PNG (icon-search.png), so `color`
 * can't recolor it. brightness(0) forces it to a solid black silhouette so it
 * matches the black mic/barcode icons. Scoped to .ss-se-cluster, so it only
 * applies where the feature injected the tools (stores without it are untouched). */
.ss-se-cluster .large-search-magnifier,
.ss-se-cluster input[type='image'],
.ss-se-cluster img {
    vertical-align: middle;
    max-width: none;
    filter: brightness(0) !important;
}

.ss-se-btn {
    -webkit-appearance: none;
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    margin: 0;
    border-radius: 50%;
    /* !important throughout: the mobile template forces a grey (#CCCCCC) background,
     * a border and a light font colour on buttons (action_buttons_*_mobile). We keep
     * these icon buttons borderless, transparent, with solid black icons so they are
     * clearly visible on the light search field. */
    border: 0 !important;
    background: transparent !important;
    color: #000 !important;
    cursor: pointer;
    line-height: 0;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, transform .1s ease;
}
.ss-se-btn:hover,
.ss-se-btn:focus   { background: rgba(0,0,0,.08) !important; color: #111; }
.ss-se-btn:active  { transform: scale(.92); }
.ss-se-btn:focus-visible { outline: 2px solid #00aeef; outline-offset: 1px; }
/* Force the icon size: storefront themes often ship a global `svg { width:auto }`
 * (responsive-image reset) that otherwise collapses these icons to a ~5px sliver
 * (the "cross"/line seen before this fix). !important + flex:0 0 auto wins over it. */
.ss-se-btn svg {
    display: block;
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto;
}

/* Reserve room on the right for the tools. box-sizing:border-box is critical:
 * these inputs are content-box in the templates, so without it the padding-right
 * ADDS to the rendered width (it ballooned the search bar and overflowed mobile).
 * With border-box the padding sits inside the input's existing width. The exact
 * padding value is then set from the measured cluster width by search-enhance.js. */
input.ss-se-has-tools {
    box-sizing: border-box !important;
    padding-right: 96px !important;
}

/* Listening state - pulsing red mic. */
.ss-se-mic.ss-se-listening {
    color: #fff;
    background: #e53935;
    animation: ss-se-pulse 1.2s infinite;
}
@keyframes ss-se-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(229,57,53,.55); }
    70%  { box-shadow: 0 0 0 8px rgba(229,57,53,0); }
    100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); }
}
@media (prefers-reduced-motion: reduce) {
    .ss-se-mic.ss-se-listening { animation: none; }
}

/* ------------------------------- scan modal ------------------------------- */
.ss-se-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;         /* above sticky headers / announcement bars */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,.72);
    padding: 16px;
    box-sizing: border-box;
}
.ss-se-modal-box {
    width: 100%;
    max-width: 460px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,.35);
    font-family: inherit;
}
.ss-se-modal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    border-bottom: 1px solid #eee;
}
.ss-se-modal-close {
    -webkit-appearance: none;
    appearance: none;
    border: 0;
    background: transparent;
    color: #666;
    cursor: pointer;
    padding: 4px;
    line-height: 0;
    border-radius: 6px;
}
.ss-se-modal-close:hover { background: rgba(0,0,0,.07); color: #111; }

.ss-se-video {
    display: block;
    width: 100%;
    max-height: 60vh;
    background: #000;
    object-fit: cover;
}
.ss-se-hint {
    padding: 12px 14px;
    font-size: .9rem;
    color: #444;
    text-align: center;
}
.ss-se-hint-error { color: #c62828; }