/* Optimi AI Search on the shop (includes/dropdown.php, includes/searchbox.php):
 * the dropdown, our own search box, the search screen, the floating button and
 * the owner's badge. Everything is scoped to optimi-ais- classes and reads the
 * custom properties of the owner's design (includes/design.php) - each with a
 * neutral fallback - and inherits the theme's font. */

/* The dropdown */
.optimi-ais-panel {
    position: absolute; z-index: 2147483000; box-sizing: border-box;
    max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: 6px 0; margin: 0;
    background: var(--optimi-ais-drop, #fff); color: var(--optimi-ais-drop-text, #1d2327);
    font-size: 14px; line-height: 1.4; text-align: left;
    border: 1px solid rgba(0, 0, 0, .12); border-radius: min(var(--optimi-ais-radius, 8px), 12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .14);
}
.optimi-ais-panel[hidden] { display: none; }
.optimi-ais-heading { margin: 8px 14px 2px; font-size: 12px; font-weight: 600; opacity: .7; }
.optimi-ais-option { display: block; text-decoration: none; color: inherit; }
.optimi-ais-option:focus, .optimi-ais-option:hover, .optimi-ais-option.is-active { background: var(--optimi-ais-hover, #f3f4f5); outline: none; }
.optimi-ais-product {
    display: grid; grid-template-columns: var(--optimi-ais-image, 48px) 1fr; gap: 12px; align-items: center; padding: 8px 14px;
}
.optimi-ais-product img {
    display: block; width: var(--optimi-ais-image, 48px); height: var(--optimi-ais-image, 48px); max-width: none;
    object-fit: cover; border-radius: 4px; background: rgba(0, 0, 0, .04); margin: 0;
}
.optimi-ais-noimg { display: block; width: var(--optimi-ais-image, 48px); height: var(--optimi-ais-image, 48px); border-radius: 4px; background: rgba(0, 0, 0, .06); }
.optimi-ais-grid .optimi-ais-noimg { width: 100%; height: auto; aspect-ratio: 1; }
.optimi-ais-body { display: flex; flex-direction: column; min-width: 0; }
.optimi-ais-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.optimi-ais-meta { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 13px; }
.optimi-ais-price { color: var(--optimi-ais-price, inherit); }
.optimi-ais-price del { opacity: .6; margin-right: 4px; }
.optimi-ais-price ins { text-decoration: none; }
.optimi-ais-sku { opacity: .7; }
.optimi-ais-stock { color: var(--optimi-ais-instock, #008a20); }
.optimi-ais-outofstock { color: var(--optimi-ais-outofstock, #b32d2e); }
.optimi-ais-onbackorder { color: #996800; }
.optimi-ais-cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.optimi-ais-cat { padding: 4px 10px; border: 1px solid rgba(0, 0, 0, .15); border-radius: 999px; font-size: 13px; }
.optimi-ais-post { padding: 6px 14px; }
.optimi-ais-all {
    margin-top: 4px; padding: 10px 14px; border-top: 1px solid rgba(0, 0, 0, .08); font-weight: 600;
    color: var(--optimi-ais-seeall, inherit);
}
.optimi-ais-none { margin: 10px 14px 4px; opacity: .75; }
/* The grid: the products side by side, their name under the photo. */
.optimi-ais-grid .optimi-ais-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 4px; padding: 0 8px; }
.optimi-ais-grid .optimi-ais-product { grid-template-columns: 1fr; gap: 6px; padding: 8px; border-radius: 6px; }
.optimi-ais-grid .optimi-ais-product img { width: 100%; height: auto; aspect-ratio: 1; }
.optimi-ais-grid .optimi-ais-title { white-space: normal; }
@media (max-width: 599px) {
    .optimi-ais-panel { max-height: 60vh; font-size: 15px; }
    .optimi-ais-product { padding: 10px 14px; }
    .optimi-ais-grid .optimi-ais-products { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: no-preference) {
    .optimi-ais-option { transition: background-color .1s; }
}

/* Our own search box: the same component in every theme. */
.optimi-ais-box {
    box-sizing: border-box; width: var(--optimi-ais-width, 100%); max-width: 100%; margin: 0; padding: 0;
    font: inherit; color: var(--optimi-ais-text, inherit); text-align: left;
}
.optimi-ais-box *, .optimi-ais-box *::before, .optimi-ais-box *::after { box-sizing: border-box; }
.optimi-ais-box .optimi-ais-form { display: flex; gap: 8px; align-items: stretch; width: 100%; margin: 0; padding: 0; border: 0; background: none; }
.optimi-ais-box .optimi-ais-field { position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; margin: 0; }
.optimi-ais-box .optimi-ais-field .optimi-ais-icon { position: absolute; left: 12px; width: 20px; height: 20px; opacity: .6; pointer-events: none; }
.optimi-ais-box .optimi-ais-form .optimi-ais-input {
    -webkit-appearance: none; appearance: none; display: block; width: 100%; max-width: none;
    height: var(--optimi-ais-height, 44px); min-height: 0; margin: 0; padding: 0 12px 0 42px;
    font: inherit; font-size: 16px; line-height: normal; letter-spacing: normal;
    color: var(--optimi-ais-text, #1d2327); background: var(--optimi-ais-bg, #fff);
    border: var(--optimi-ais-border-width, 1px) solid var(--optimi-ais-border, #c3c4c7);
    border-radius: var(--optimi-ais-radius, 6px); box-shadow: var(--optimi-ais-shadow, none); outline: none;
}
.optimi-ais-box .optimi-ais-form .optimi-ais-input::placeholder { color: var(--optimi-ais-placeholder, #6b7280); opacity: 1; }
.optimi-ais-box .optimi-ais-form .optimi-ais-input:focus {
    border-color: var(--optimi-ais-focus, #2271b1); box-shadow: 0 0 0 2px var(--optimi-ais-focus, #2271b1);
}
.optimi-ais-box .optimi-ais-form .optimi-ais-input::-webkit-search-decoration { -webkit-appearance: none; }
.optimi-ais-box .optimi-ais-form .optimi-ais-button {
    -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex: 0 0 auto;
    width: auto; height: var(--optimi-ais-height, 44px); min-height: 0; margin: 0; padding: 0 18px;
    font: inherit; font-size: 15px; font-weight: 600; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap;
    cursor: pointer; color: var(--optimi-ais-button-text, #fff); background: var(--optimi-ais-button, #1d2327);
    border: 0; border-radius: var(--optimi-ais-radius, 6px); box-shadow: none; text-shadow: none;
}
.optimi-ais-box .optimi-ais-form .optimi-ais-button:hover { filter: brightness(1.1); }
.optimi-ais-box .optimi-ais-form .optimi-ais-button:focus-visible { outline: 2px solid var(--optimi-ais-focus, #2271b1); outline-offset: 2px; }
.optimi-ais-box .optimi-ais-button .optimi-ais-icon { display: none; width: 20px; height: 20px; }
/* The look's choices: the icon's place, and the button's kind. */
.optimi-ais-box.optimi-ais-icon-right .optimi-ais-field .optimi-ais-icon { left: auto; right: 12px; }
.optimi-ais-box.optimi-ais-icon-right .optimi-ais-form .optimi-ais-input { padding: 0 42px 0 14px; }
.optimi-ais-box.optimi-ais-icon-none .optimi-ais-field .optimi-ais-icon { display: none; }
.optimi-ais-box.optimi-ais-icon-none .optimi-ais-form .optimi-ais-input { padding: 0 14px; }
.optimi-ais-box.optimi-ais-btn-icon .optimi-ais-form .optimi-ais-button { width: var(--optimi-ais-height, 44px); padding: 0; }
.optimi-ais-box.optimi-ais-btn-icon .optimi-ais-button-text {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.optimi-ais-box.optimi-ais-btn-icon .optimi-ais-button .optimi-ais-icon { display: block; }
.optimi-ais-box.optimi-ais-btn-none .optimi-ais-form .optimi-ais-button {
    position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0);
}
.optimi-ais-box-menu { min-width: 220px; }
.optimi-ais-menu-item { list-style: none; display: flex; align-items: center; }
.optimi-ais-sr {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* The buttons that open the search screen: the menu icon and the floating button. */
.optimi-ais-open {
    -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; min-height: 0; margin: 0; padding: 0; font: inherit; line-height: 1; cursor: pointer;
    color: inherit; background: transparent; border: 0; border-radius: 8px; box-shadow: none;
}
.optimi-ais-open .optimi-ais-icon { width: 22px; height: 22px; }
.optimi-ais-open:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.optimi-ais-open.optimi-ais-fab {
    position: fixed; z-index: 2147482999; display: none;
    width: var(--optimi-ais-fab-size, 56px); height: var(--optimi-ais-fab-size, 56px); border-radius: 999px;
    color: var(--optimi-ais-fab-fg, #fff); background: var(--optimi-ais-fab-bg, #1d2327); box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
}
.optimi-ais-fab.optimi-ais-fab-br { right: var(--optimi-ais-fab-offset, 20px); bottom: calc(var(--optimi-ais-fab-offset, 20px) + var(--optimi-ais-fab-lift, 0px)); }
.optimi-ais-fab.optimi-ais-fab-bl { left: var(--optimi-ais-fab-offset, 20px); bottom: calc(var(--optimi-ais-fab-offset, 20px) + var(--optimi-ais-fab-lift, 0px)); }
.optimi-ais-fab.optimi-ais-fab-tr { right: var(--optimi-ais-fab-offset, 20px); top: var(--optimi-ais-fab-offset, 20px); }
.optimi-ais-fab.optimi-ais-fab-tl { left: var(--optimi-ais-fab-offset, 20px); top: var(--optimi-ais-fab-offset, 20px); }
@media (min-width: 600px) { .optimi-ais-open.optimi-ais-fab.optimi-ais-fab-desktop { display: inline-flex; } }
@media (max-width: 599px) { .optimi-ais-open.optimi-ais-fab.optimi-ais-fab-phone { display: inline-flex; } }
.admin-bar .optimi-ais-fab.optimi-ais-fab-tr, .admin-bar .optimi-ais-fab.optimi-ais-fab-tl { top: calc(var(--optimi-ais-fab-offset, 20px) + 32px); }

/* The search bar above the theme's header (wp_body_open). */
.optimi-ais-bar {
    box-sizing: border-box; width: 100%; padding: 10px 16px;
    background: var(--optimi-ais-drop, #f6f7f7); border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.optimi-ais-bar .optimi-ais-box { margin: 0 auto; max-width: 720px; }

/* The search screen: our box and its results over the page. A sheet at the
 * top on a computer, the whole screen on a phone. */
.optimi-ais-screen {
    position: fixed; inset: 0; z-index: 2147483001; display: flex; justify-content: center; align-items: flex-start;
    background: rgba(0, 0, 0, .45); font-size: 15px; line-height: 1.4; text-align: left;
}
.optimi-ais-screen[hidden] { display: none; }
html.optimi-ais-screen-open, html.optimi-ais-screen-open body { overflow: hidden; }
.optimi-ais-sheet {
    display: flex; flex-direction: column; box-sizing: border-box; width: 100%; max-width: 720px; max-height: 86vh; margin-top: 6vh;
    background: var(--optimi-ais-drop, #fff); color: var(--optimi-ais-drop-text, #1d2327);
    border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); overflow: hidden;
}
.optimi-ais-sheet-top { display: flex; align-items: center; gap: 8px; padding: 14px; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.optimi-ais-sheet-top .optimi-ais-box { flex: 1 1 auto; width: 100%; }
.optimi-ais-sheet-close {
    -webkit-appearance: none; appearance: none; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; padding: 0;
    font: 28px/1 sans-serif; color: inherit; background: transparent; border: 0; border-radius: 6px; cursor: pointer;
}
.optimi-ais-sheet-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.optimi-ais-sheet-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.optimi-ais-screen .optimi-ais-panel.optimi-ais-panel-screen {
    position: static; width: auto; max-height: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; z-index: auto;
}
@media (max-width: 599px) {
    .optimi-ais-sheet { max-width: none; height: 100%; max-height: none; margin-top: 0; border-radius: 0; }
    .optimi-ais-sheet-top { padding: 10px; }
}

/* The owner's badge: only a logged-in manager of the plugin ever gets it. */
.optimi-ais-badge {
    position: fixed; left: 12px; bottom: 12px; z-index: 2147483000; max-width: min(360px, calc(100vw - 24px));
    box-sizing: border-box; padding: 10px 34px 10px 12px; border-radius: 8px; border-left: 4px solid #008a20;
    background: #1d2327; color: #fff; font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .25); text-align: left;
}
.optimi-ais-badge.optimi-ais-badge-warn { border-left-color: #dba617; }
.optimi-ais-badge strong, .optimi-ais-badge span, .optimi-ais-badge a { display: block; }
.optimi-ais-badge-line { margin-top: 4px; }
.optimi-ais-badge a.optimi-ais-badge-link { margin-top: 6px; color: #72aee6; text-decoration: underline; }
.optimi-ais-badge-note { margin-top: 6px; opacity: .7; font-size: 12px; }
.optimi-ais-badge-close {
    position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; margin: 0; border: 0;
    background: transparent; color: #fff; font-size: 18px; line-height: 26px; cursor: pointer;
}

/* Searching (1.7.1): while a lookup is out, a small spinner where the box's search icon is,
 * and a quiet line at the foot of the open panel. CSS only; still for reduced motion. */
.optimi-ais-box.optimi-ais-searching .optimi-ais-field .optimi-ais-icon { visibility: hidden; }
.optimi-ais-box.optimi-ais-searching .optimi-ais-field::after {
    content: ""; position: absolute; left: 13px; top: 50%; width: 16px; height: 16px; margin-top: -8px; box-sizing: border-box;
    border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; opacity: .6; pointer-events: none;
    color: var(--optimi-ais-text, #1d2327);
}
.optimi-ais-box.optimi-ais-icon-right.optimi-ais-searching .optimi-ais-field::after,
.optimi-ais-box.optimi-ais-icon-none.optimi-ais-searching .optimi-ais-field::after { left: auto; right: 13px; }
.optimi-ais-box.optimi-ais-icon-none.optimi-ais-searching .optimi-ais-form .optimi-ais-input { padding-right: 40px; }
.optimi-ais-busy { margin: 6px 14px 4px; font-size: 13px; opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
    .optimi-ais-box.optimi-ais-searching .optimi-ais-field::after { animation: optimi-ais-spin .7s linear infinite; }
    @keyframes optimi-ais-spin { to { transform: rotate(360deg); } }
}

/* The two layers: the names at once, Optimi's best matches fade in on the pause. */
.optimi-ais-heading-meaning::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 6px 1px 0; border-radius: 50%; background: var(--optimi-ais-focus, #2271b1); }
@media (prefers-reduced-motion: no-preference) {
    .optimi-ais-new { animation: optimi-ais-in .25s ease-out; }
    @keyframes optimi-ais-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
}

/* The popular searches (1.9.0): a focused, empty box shows them as a short list of plain rows. */
.optimi-ais-popular { padding: 2px 0 6px; }
.optimi-ais-pop { display: block; padding: 7px 14px; font-size: 14px; text-decoration: none; color: inherit; }
.optimi-ais-pop::before { content: ""; display: inline-block; width: 12px; height: 12px; margin: 0 8px -1px 0; border: 2px solid currentColor; border-radius: 50%; opacity: .45; box-sizing: border-box; }