/**
 * Scoped search — default presentation.
 *
 * THEMING CONTRACT
 * ----------------
 * Self-contained: drop the module into any PrestaShop 9 shop and it renders
 * correctly with neutral defaults. A theme restyles it by setting the --ksr-*
 * custom properties declared on `.kicked-search`, never by overriding selectors.
 *
 *   .kicked-search {
 *     --ksr-accent: var(--my-brand-colour);
 *     --ksr-radius: 12px;
 *   }
 *
 * Focus is shown on the shell, not on the control inside it — see the note in
 * the Focus section below for why:
 *   --ksr-focus-border      shell border once any control inside it has focus
 *   --ksr-focus-ring        the soft ring around that shell
 *   --ksr-focus-ring-width  its thickness
 *
 * The dropdown carries four properties of its own beyond the shell's:
 *   --ksr-meta          group headings and a suggestion's category line
 *   --ksr-font-display  the suggestion price
 *   --ksr-thumb-border  hairline around a suggestion thumbnail
 *   --ksr-divider       rule above the "see all results" row
 *
 * Everything below sits in a cascade layer on purpose: layered CSS always loses
 * to unlayered CSS, so a host theme's ordinary stylesheet wins without having to
 * match load order or out-specify a selector.
 *
 * @copyright Kicked SRL
 * @license   AFL-3.0
 */

@layer kicked-search {
  .kicked-search {
    /* Shell */
    --ksr-height: 2.875rem;
    --ksr-radius: 0.75rem;
    --ksr-border: #e4e4e7;
    --ksr-border-width: 1.5px;
    --ksr-surface: #fff;

    /* Type */
    --ksr-font-mono: ui-monospace, sfmono-regular, menlo, monospace;
    --ksr-font-display: inherit;
    --ksr-ink: #18181b;
    --ksr-muted: #71717a;

    /* Metadata voice: the group headings and a suggestion's category line.
       One step lighter than --ksr-muted, which dresses controls. */
    --ksr-meta: #a1a1aa;

    /* Accent — the submit button and price colour */
    --ksr-accent: #b91c1c;
    --ksr-accent-ink: #fff;

    /* Dropdown */
    --ksr-panel-radius: 0.875rem;
    --ksr-panel-shadow: 0 18px 40px rgb(0 0 0 / 14%);
    --ksr-hover: #f4f4f5;

    /* A suggestion thumbnail's hairline, and the rule above the "see all" row.
       Both are lighter than --ksr-border, which is the search field's edge. */
    --ksr-thumb-border: #e4e4e7;
    --ksr-divider: #f4f4f5;

    position: relative;
    width: 100%;
  }

  /* One border around three controls. `overflow: hidden` is what tucks the
     square submit button into the rounded corner — without it the button's
     right edge juts past the radius and the field looks like two components
     that happen to be touching. The dropdown IS a child of this form, but the
     form must stay unpositioned: the absolutely-positioned dropdown then
     resolves its containing block at .kicked-search (position: relative)
     outside this clip. Give the form `position: relative` and the dropdown
     gets clipped to the field's height. */
  .kicked-search__form {
    display: flex;
    align-items: stretch;
    height: var(--ksr-height);
    overflow: hidden;
    background: var(--ksr-surface);
    border: var(--ksr-border-width) solid var(--ksr-border);
    border-radius: var(--ksr-radius);
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  /* --- Scope selector ----------------------------------------------------- */

  .kicked-search__scope {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    padding-inline: 0.875rem;
    border-right: 1px solid var(--ksr-border);
  }

  /* The native select is kept — it submits, works without JS, and gets the
     platform picker on touch — but its chrome is replaced by our own caret. */
  .kicked-search__scope-select {
    /* A <select> is intrinsically as wide as its WIDEST option, not the one
       actually selected. With a long category in the list that left the caret
       floating ~43px past the end of "Toate categoriile", where the design puts
       it 6px away — the largest single spacing deviation in the header.

       `field-sizing: content` makes the box track the current selection.
       Browsers without it fall back to exactly today's behaviour, and the
       max-width below still caps the widest case either way. */
    field-sizing: content;
    max-width: 11rem;
    padding: 0 1.25rem 0 0;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ksr-muted);
    cursor: pointer;
    background: none;
    border: 0;
    outline-offset: 0.25rem;
    appearance: none;
  }

  .kicked-search__scope-caret {
    position: absolute;

    /* 14px, matching the scope's own `padding: 0 14px` in the design
       (Home.dc.html:60) — the chevron is its last flex child, so its right edge
       sits exactly one padding in from the divider. At 12px it also left an 8px
       label gap where the design draws 6px, so this lands both numbers. */
    right: 0.875rem;
    color: var(--ksr-muted);
    pointer-events: none;
  }

  /* --- Input & submit ----------------------------------------------------- */

  .kicked-search__input {
    flex: 1;
    min-width: 0;
    padding-inline: 0.875rem;
    font-size: 0.875rem;
    color: var(--ksr-ink);
    background: transparent;
    border: 0;
    outline-offset: -0.125rem;
  }

  .kicked-search__submit {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3.375rem;
    color: var(--ksr-accent-ink);
    cursor: pointer;
    background: var(--ksr-accent);
    border: 0;

    /* The wrapper's overflow clip carves the corner at radius-minus-border,
       one pixel inside the border's own curve — and that pixel reads as a
       white arc between the brick and the outline. Painting the button's
       corners at exactly the inner radius lets the antialiasing blend brick
       into border with no gap to see. */
    border-radius: 0 calc(var(--ksr-radius) - var(--ksr-border-width)) calc(var(--ksr-radius) - var(--ksr-border-width)) 0;
  }

  .kicked-search__submit:hover {
    filter: brightness(0.94);
  }

  /* --- Focus -------------------------------------------------------------- */

  /* The scope, the input and the submit are three controls sharing one border,
     so focus is shown on the shell rather than on the part. An outline drawn
     around a control in the middle of a bordered row reads as a validation
     error — a stray box with no relationship to anything — and around the input
     it draws a second rectangle just inside the first.
     Accessibility is not traded away here: the whole field visibly changes
     border colour and gains a ring, which is a larger and clearer indicator
     than the one it replaces. */
  .kicked-search__form:has(:focus-visible) {
    border-color: var(--ksr-focus-border, var(--ksr-accent));
    box-shadow: 0 0 0 var(--ksr-focus-ring-width, 0.1875rem) var(--ksr-focus-ring, rgb(185 28 28 / 15%));
  }

  .kicked-search__scope-select:focus-visible,
  .kicked-search__input:focus-visible,
  .kicked-search__submit:focus-visible {
    outline: none;
  }

  /* Without :has() the shell cannot react, so the controls keep their own
     outline — drawn inside their box so it still cannot escape the shell. */
  @supports not selector(:has(*)) {
    .kicked-search__scope-select:focus-visible,
    .kicked-search__input:focus-visible,
    .kicked-search__submit:focus-visible {
      outline: 0.125rem solid var(--ksr-accent);
      outline-offset: -0.25rem;
    }
  }

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

  .kicked-search__results {
    position: absolute;
    top: calc(100% + 0.5rem); /* 8px below a 46px field = the design's 54px */
    right: 0;
    left: 0;
    z-index: 70;
    max-height: 26rem;
    padding: 0.5rem;
    overflow-y: auto;
    background: var(--ksr-surface);
    border: 1px solid var(--ksr-border);
    border-radius: var(--ksr-panel-radius);
    box-shadow: var(--ksr-panel-shadow);
  }

  .kicked-search__results[hidden] {
    display: none;
  }

  .kicked-search__group {
    padding: 0.5rem 0.75rem 0.375rem; /* 8px 12px 6px */
    margin: 0;
    font-family: var(--ksr-font-mono);
    font-size: 0.625rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ksr-meta);
  }

  .kicked-search__option {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    padding: 0.5625rem 0.75rem; /* 9px 12px */
    color: var(--ksr-ink);
    text-decoration: none;
    border-radius: 0.625rem;
  }

  .kicked-search__option:hover,
  .kicked-search__option.is-active {
    background: var(--ksr-hover);
  }

  .kicked-search__option-img {
    box-sizing: border-box;
    flex: none;
    width: 2.625rem; /* 42px */
    height: 2.625rem;

    /* The artwork covers 80% of the well, so it never touches the hairline.
       An absolute inset, not a percentage: percentage padding resolves against
       the containing block's width, not the element's own. */
    padding: 0.2625rem; /* (42px − 80%) / 2 */
    object-fit: contain;
    background: var(--ksr-surface);
    border: 1px solid var(--ksr-thumb-border);
    border-radius: 0.5rem;
  }

  .kicked-search__option-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
  }

  .kicked-search__option-name {
    overflow: hidden;
    font-size: 0.8125rem;
    line-height: normal;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .kicked-search__option-meta {
    font-size: 0.71875rem; /* 11.5px */
    line-height: normal;
    color: var(--ksr-meta);
  }

  .kicked-search__option-price {
    flex: none;
    font-family: var(--ksr-font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ksr-accent);
  }

  .kicked-search__all {
    display: block;
    padding: 0.6875rem 0.75rem; /* 11px 12px */
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ksr-accent);
    text-align: center;
    text-decoration: none;
    border-top: 1px solid var(--ksr-divider);
  }

  /* Below md the scope selector costs more width than it earns. */
  @media (max-width: 767.98px) {
    .kicked-search__scope {
      display: none;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .kicked-search__form {
      transition: none;
    }
  }
}