/**
 * Smart Search - front office styles.
 *
 * Scoped entirely under .smartsearch-* so nothing here can reach the theme's
 * own elements. Colours are kept neutral and inherited where possible so the
 * module blends into whatever palette the shop already uses.
 */

/* ---------------------------------------------------------------------- */
/* Assistant button next to the theme's search field                       */
/* ---------------------------------------------------------------------- */

.smartsearch-entry {
    /* --smartsearch-accent is set inline from the module settings so the
       button can be matched to the shop's own palette without editing CSS. */
    --smartsearch-accent: #f0a30a;

    position: relative;
    display: inline-flex;
    vertical-align: middle;
    /* Typography is inherited rather than declared, so the button reads as part
       of the theme instead of an add-on pasted on top of it. */
    font-family: inherit;
}

.smartsearch-entry--placed {
    margin-left: 10px;
}

.smartsearch-entry__button {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    /* Matches the height of a standard theme search field. */
    height: 42px;
    border-radius: 21px;
    background: linear-gradient(
        135deg,
        var(--smartsearch-accent) 0%,
        color-mix(in srgb, var(--smartsearch-accent) 82%, #000) 100%
    );
    color: #fff;
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: .01em;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .16);
    transition: transform .18s cubic-bezier(.2, .8, .3, 1),
                box-shadow .18s ease,
                filter .18s ease;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
}

/* color-mix is recent; older browsers simply get the flat accent colour. */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .smartsearch-entry__button {
        background: var(--smartsearch-accent);
    }
}

.smartsearch-entry__button:hover,
.smartsearch-entry__button:focus {
    color: #fff;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .22);
    filter: saturate(1.08);
}

.smartsearch-entry__button:active {
    transform: translateY(0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

/* Keyboard users get a clearly visible ring; mouse users never see it. */
.smartsearch-entry__button:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--smartsearch-accent) 45%, #fff);
    outline-offset: 2px;
}

/* A light sweep crossing the button on hover - the cheapest way to make it
   read as interactive without animating anything that moves layout. */
.smartsearch-entry__button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(
        100deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, .35) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-18deg);
    transition: left .55s ease;
    pointer-events: none;
}

.smartsearch-entry__button:hover::after {
    left: 120%;
}

.smartsearch-entry__icon {
    display: inline-flex;
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
}

.smartsearch-entry__icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* The two sparks twinkle on hover, so the icon signals "smart search" rather
   than just repeating the magnifier the theme already shows. */
.smartsearch-entry__spark {
    opacity: .85;
    transform-origin: center;
    transition: opacity .2s ease;
}

.smartsearch-entry__button:hover .smartsearch-entry__spark--1 {
    animation: smartsearch-twinkle 1.1s ease-in-out infinite;
}

.smartsearch-entry__button:hover .smartsearch-entry__spark--2 {
    animation: smartsearch-twinkle 1.1s ease-in-out .35s infinite;
}

@keyframes smartsearch-twinkle {
    0%, 100% { opacity: .45; }
    50% { opacity: 1; }
}

.smartsearch-entry__text-short {
    display: none;
}

/* Hover hint ----------------------------------------------------------- */

.smartsearch-entry__hint {
    position: absolute;
    top: calc(100% + 8px);
    /* Anchored to the button's right edge rather than centred on it. The button
       lives at the end of a shop header, so a centred tooltip would hang off
       the right side of the window; growing leftwards keeps it on screen. */
    right: 0;
    left: auto;
    z-index: 1001;
    width: max-content;
    max-width: min(320px, 80vw);
    padding: 8px 12px;
    background: #232323;
    color: #fff;
    border-radius: 6px;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    pointer-events: none;
}

.smartsearch-entry__hint::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 20px;
    border: 5px solid transparent;
    border-bottom-color: #232323;
}

.smartsearch-entry:hover .smartsearch-entry__hint,
.smartsearch-entry__button:focus-visible ~ .smartsearch-entry__hint {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Respect a visitor who has asked their system for less motion. */
@media (prefers-reduced-motion: reduce) {
    .smartsearch-entry__button,
    .smartsearch-entry__button::after,
    .smartsearch-entry__hint {
        transition: none;
    }

    .smartsearch-entry__button:hover {
        transform: none;
    }

    .smartsearch-entry__button:hover .smartsearch-entry__spark--1,
    .smartsearch-entry__button:hover .smartsearch-entry__spark--2 {
        animation: none;
    }
}

/* On a narrow screen the full label would push the search field off the row,
   so it shortens; below that, the icon carries it alone. */
@media (max-width: 991px) {
    .smartsearch-entry__text-full {
        display: none;
    }

    .smartsearch-entry__text-short {
        display: inline;
    }
}

@media (max-width: 575px) {
    .smartsearch-entry__text {
        display: none;
    }

    .smartsearch-entry__button {
        padding: 0 12px;
    }

    .smartsearch-entry__hint {
        display: none;
    }
}

/* ---------------------------------------------------------------------- */
/* Autocomplete dropdown                                                   */
/* ---------------------------------------------------------------------- */

.smartsearch-suggestions {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    min-width: 260px;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
    overflow: hidden;
}

.smartsearch-suggestions__item {
    display: block;
    padding: 9px 14px;
    color: #333;
    font-size: 14px;
    text-decoration: none;
}

.smartsearch-suggestions__item:hover,
.smartsearch-suggestions__item:focus {
    background: #f6f6f6;
    color: #333;
    text-decoration: none;
}

.smartsearch-suggestions__item--assistant {
    border-top: 1px solid #ececec;
    background: #fffdf5;
    color: #8a6100;
}

.smartsearch-suggestions__item--assistant:hover {
    background: #fff7e0;
    color: #8a6100;
}

/* ---------------------------------------------------------------------- */
/* Results page                                                            */
/* ---------------------------------------------------------------------- */

.smartsearch-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 8px 0 40px;
}

.smartsearch-form {
    padding: 22px;
    margin-bottom: 24px;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
}

.smartsearch-form__label {
    display: block;
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 600;
    color: #232323;
}

.smartsearch-form__row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.smartsearch-form__input {
    flex: 1 1 320px;
    min-width: 0;
    padding: 12px 14px;
    font-size: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
}

.smartsearch-form__input:focus {
    outline: none;
    border-color: #f0a30a;
    box-shadow: 0 0 0 3px rgba(240, 163, 10, .18);
}

.smartsearch-form__submit {
    flex: 0 0 auto;
    padding: 12px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: #f0a30a;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.smartsearch-form__submit:hover {
    background: #d68f08;
}

.smartsearch-form__hint {
    margin: 10px 0 0;
    font-size: 13px;
    color: #777;
}

/* Interpretation chips ---------------------------------------------------*/

.smartsearch-interpretation {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}

.smartsearch-interpretation__label {
    font-size: 14px;
    color: #666;
}

.smartsearch-chip {
    display: inline-block;
    padding: 4px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #2b4a6f;
    background: #e8f0f9;
    border-radius: 14px;
}

.smartsearch-chip--price {
    color: #2e6b3a;
    background: #e6f4e9;
}

.smartsearch-chip--year {
    color: #6b4a2e;
    background: #f6eee4;
}

.smartsearch-chip--text {
    color: #444;
    background: #eee;
}

/* Notices ----------------------------------------------------------------*/

.smartsearch-notice {
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 14px;
    border-radius: 4px;
}

.smartsearch-notice--correction {
    color: #2b4a6f;
    background: #eaf2fb;
}

.smartsearch-notice--relaxed {
    color: #7a5b12;
    background: #fdf6e3;
}

.smartsearch-count {
    margin-bottom: 16px;
    font-size: 15px;
    color: #444;
}

/* Examples / empty state -------------------------------------------------*/

.smartsearch-examples,
.smartsearch-empty {
    padding: 18px 22px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
}

.smartsearch-examples__title {
    margin: 0 0 10px;
    font-weight: 600;
    color: #333;
}

.smartsearch-examples__list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.smartsearch-examples__list li {
    margin-bottom: 7px;
}

.smartsearch-examples__list a {
    color: #2b6cb0;
    font-size: 15px;
}

/* Product grid -----------------------------------------------------------*/

.smartsearch-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 20px;
}

.smartsearch-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow .15s ease, transform .15s ease;
}

.smartsearch-card:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
    transform: translateY(-2px);
}

.smartsearch-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.smartsearch-card__link:hover {
    color: inherit;
    text-decoration: none;
}

.smartsearch-card__media {
    /* A fixed square keeps the grid rows aligned whatever the cover's shape. */
    position: relative;
    padding-top: 100%;
    background: #f5f5f5;
}

.smartsearch-card__media img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.smartsearch-card__body {
    padding: 12px 14px 16px;
}

.smartsearch-card__artist {
    margin: 0 0 3px;
    font-size: 13px;
    font-weight: 600;
    color: #777;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.smartsearch-card__title {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    color: #232323;
}

.smartsearch-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin: 0 0 10px;
}

.smartsearch-tag {
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 600;
    color: #555;
    background: #f0f0f0;
    border-radius: 3px;
}

.smartsearch-card__price {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: #f0a30a;
}

/* Pagination -------------------------------------------------------------*/

.smartsearch-pagination {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: 30px;
}

.smartsearch-pagination__item {
    display: inline-block;
    min-width: 38px;
    padding: 8px 10px;
    text-align: center;
    color: #444;
    background: #fff;
    border: 1px solid #dcdcdc;
    border-radius: 4px;
    text-decoration: none;
}

.smartsearch-pagination__item:hover {
    background: #f5f5f5;
    color: #444;
    text-decoration: none;
}

.smartsearch-pagination__item.is-current {
    color: #fff;
    background: #f0a30a;
    border-color: #f0a30a;
}

@media (max-width: 575px) {
    .smartsearch-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 14px;
    }

    .smartsearch-form {
        padding: 16px;
    }

    .smartsearch-form__submit {
        flex: 1 1 100%;
    }
}