/* ==========================================================================
   Røros – Søk (header search panel)
   Figma: Røros – Design, "Søk – desktop" (2183:11) and "Søk – mobil" (2183:13)
   Markup: inc/header-search.php, results: is-ajax-results.php,
   behaviour: resources/js/header-search.js.
   #roros-search in selectors: beats Ivory's and search.css' form styles.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Panel – white, under the header, 1px black lines top and bottom,
   page dimmed 20% below (same overlay as the mega menu).
   -------------------------------------------------------------------------- */

#roros-search {
  position: fixed;
  top: var(--roros-search-top, 0);
  left: 0;
  right: 0;
  z-index: 1000;
  max-height: calc(100vh - var(--roros-search-top, 0px));
  max-height: calc(100dvh - var(--roros-search-top, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--roros-color-border-strong);
  border-bottom: 1px solid var(--roros-color-border-strong);
  background: var(--roros-color-bg-page);
  box-shadow: 0 0 0 100vmax var(--roros-color-bg-image-overlay);
  clip-path: inset(0 -100vmax -100vmax -100vmax);
  color: var(--roros-color-text-primary);
  font-family: var(--roros-font-family-ui);
}

#roros-search[hidden] {
  display: none;
}

#roros-search .roros-search__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 0 48px;
}

/* Header search button while the panel is open – Figma Icon button State=Active:
   cream circle behind the icon */
:is(.navbar-extra-icons, .mobile-additional-icons) .is-active .fa-search3 {
  border-radius: 999px;
  background: var(--roros-color-surface-cream);
}

/* While search is open, hovering the menu doesn't open submenus (they would sit
   behind the panel). Clicking a menu item closes the search, and the submenu
   then opens from the hover as usual. */
@media (min-width: 960px) {
  html.roros-search-open .menu-primary-inner > .menu-item-has-children > ul {
    visibility: hidden !important;
  }

  html.roros-search-open .menu-primary-inner > .menu-item:not(.current-menu-item, .current-menu-ancestor) > a::after {
    opacity: 0 !important;
  }

  html.roros-search-open .menu-primary-inner > .menu-item-has-children > a > i {
    transform: none !important;
  }
}

/* Black icon, not Uncode's grey hover/focus colour on the link */
:is(.navbar-extra-icons, .mobile-additional-icons) .is-active .fa-search3::before {
  background: var(--roros-color-icon-primary);
}

/* --------------------------------------------------------------------------
   2. Search input – Figma "Search input": 56px (48px mobile), 1px black,
   search icon left, clear (×) right, GT Walsheim 18/25.
   Also the field on the search results page (search.php).
   -------------------------------------------------------------------------- */

:is(#roros-search, .search-page) .roros-search__field {
  position: relative;
}

:is(#roros-search, .search-page) .is-search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  margin: 0;
  padding: 0 48px 0 12px !important;
  border: 1px solid var(--roros-color-border-strong) !important;
  border-radius: 0;
  background: var(--roros-color-bg-page);
  box-shadow: none;
}

:is(#roros-search, .search-page) .is-search-form label {
  flex: 1;
  min-width: 0;
  margin: 0;
}

:is(#roros-search, .search-page) .is-search-input {
  width: 100%;
  height: auto !important;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0;
  outline: 0;
  background: none !important;
  box-shadow: none !important;
  color: var(--roros-color-text-primary) !important;
  font-family: var(--roros-font-family-ui) !important;
  font-size: var(--roros-font-size-body) !important;
  font-weight: 400 !important;
  line-height: var(--roros-line-height-body) !important;
  letter-spacing: 0;
  text-align: left !important;
  -webkit-appearance: none;
  appearance: none;
}

:is(#roros-search, .search-page) .is-search-input::placeholder {
  color: var(--roros-color-text-placeholder) !important;
  font-weight: 400 !important;
  opacity: 1;
}

:is(#roros-search, .search-page) .is-search-input::-webkit-input-placeholder {
  color: var(--roros-color-text-placeholder) !important;
  font-weight: 400 !important;
}

:is(#roros-search, .search-page) .is-search-input::-webkit-search-cancel-button {
  display: none;
}

/* Ivory's submit button becomes the search icon on the left */
:is(#roros-search, .search-page) .is-search-submit {
  order: -1;
  position: static;
  display: block;
  flex: none;
  width: 24px;
  height: 24px !important;
  margin: 0;
  padding: 0;
  border: 0;
  background: currentColor !important;
  -webkit-mask: url("../icon/search.svg") center / contain no-repeat;
  mask: url("../icon/search.svg") center / contain no-repeat;
  cursor: pointer;
}

:is(#roros-search, .search-page) .is-search-submit > * {
  display: none;
}

#roros-search .is-loader-image {
  right: 0 !important;
}

#roros-search .roros-search__clear {
  position: absolute;
  top: 50%;
  right: 2px;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}

#roros-search .roros-search__clear[hidden] {
  display: none;
}

#roros-search .roros-search__clear::before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  margin: auto;
  background: currentColor;
  -webkit-mask: url("../icon/clear.svg") center / contain no-repeat;
  mask: url("../icon/clear.svg") center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   3. States (classes set by header-search.js)
   .has-results: results are shown – also after the field is cleared, until a
                 new search replaces them.
   .has-term:    a term is typed – popular searches give way to "Søker …".
   .is-loading:  a search is running – current results are dimmed.
   Popular searches show only when neither a term nor results are there.
   -------------------------------------------------------------------------- */

#roros-search:is(.has-term, .has-results) .roros-search__popular {
  display: none;
}

#roros-search .roros-search__results {
  display: none;
  font-size: var(--roros-font-size-body);
  line-height: var(--roros-line-height-body);
  transition: opacity 0.15s ease;
}

#roros-search.has-results .roros-search__results {
  display: block;
}

/* Previous results stay, dimmed, until the new ones arrive */
#roros-search.is-loading .roros-search__results {
  opacity: 0.4;
}

@media (prefers-reduced-motion: reduce) {
  #roros-search .roros-search__results {
    transition: none;
  }
}

/* "Søker …" while a search runs, or an error with a link to the search page */
#roros-search .roros-search__status {
  display: none;
  margin: 0;
  color: var(--roros-color-text-secondary);
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-body);
  line-height: var(--roros-line-height-body);
}

#roros-search .roros-search__status:not(:empty) {
  display: block;
}

#roros-search .roros-search__status a {
  color: var(--roros-color-text-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4. Popular searches – Figma "Populære søk" + Chip
   -------------------------------------------------------------------------- */

#roros-search .roros-search__popular {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#roros-search .roros-search__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#roros-search .roros-search__chips li {
  margin: 0;
}

#roros-search .roros-search-chip {
  display: block;
  margin: 0;
  padding: 7px;
  border: 1px solid var(--roros-color-border-subtle);
  border-radius: 0;
  background: none;
  color: var(--roros-color-text-primary);
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-body);
  font-weight: 400;
  line-height: var(--roros-line-height-body);
  text-decoration: none;
  cursor: pointer;
}

#roros-search .roros-search-chip:hover {
  border-color: var(--roros-color-border-strong);
}

/* --------------------------------------------------------------------------
   5. Result groups – heading + "Se alle →" + rows.
   Desktop: two columns, 632 and 400, 48px apart – the first group (recipes)
   left, each next group in the shorter column (inc/header-search.php).
   -------------------------------------------------------------------------- */

#roros-search .roros-search-results {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#roros-search .roros-search-columns {
  display: grid;
  grid-template-columns: 632fr 400fr;
  gap: 48px;
  align-items: start;
}

#roros-search :is(.roros-search-columns__main, .roros-search-columns__side) {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 0;
}

#roros-search .roros-search-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#roros-search .roros-search-group__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* Figma Heading/H4: Belwe Medium 20/24 */
#roros-search .roros-search-group__title {
  margin: 0;
  color: var(--roros-color-text-primary);
  font-family: var(--roros-font-family-display);
  font-size: var(--roros-font-size-h4);
  font-weight: normal;
  line-height: var(--roros-line-height-h4);
  letter-spacing: 0;
  text-transform: none;
}

/* Figma "Link / See all": UI/Body 18/27 + 16×14 arrow, 8px gap */
#roros-search .roros-search-see-all {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 8px;
  color: var(--roros-color-text-primary);
  font-size: var(--roros-font-size-ui-body);
  line-height: var(--roros-line-height-ui-body);
  text-decoration: none;
  white-space: nowrap;
}

#roros-search .roros-search-see-all::after {
  content: "";
  width: 16px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("../icon/arrow-right.svg") center / contain no-repeat;
  mask: url("../icon/arrow-right.svg") center / contain no-repeat;
}

#roros-search .roros-search-see-all:hover span {
  text-decoration: underline;
  text-underline-offset: 4px;
}

#roros-search .roros-search-see-all__short {
  display: none;
}

#roros-search .roros-search-group__rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --------------------------------------------------------------------------
   6. Result row – Figma "Search result": light blue, 56px image,
   title GT Walsheim Medium 18/25, rating or category, price / "Finn i butikk".
   Also used for «Populært i nettbutikken» in the empty cart (components/shop-cart-empty.php).
   -------------------------------------------------------------------------- */

:is(#roros-search, .shop-cart-empty) .roros-search-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px 8px 8px;
  background: var(--roros-color-surface-blue);
  color: var(--roros-color-text-primary);
  text-decoration: none;
}

:is(#roros-search, .shop-cart-empty) .roros-search-result:hover .roros-search-result__title {
  text-decoration: underline;
  text-underline-offset: 4px;
}

:is(#roros-search, .shop-cart-empty) .roros-search-result__thumb {
  flex: none;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--roros-color-bg-page);
}

:is(#roros-search, .shop-cart-empty) .roros-search-result__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Packshots are shown whole on white */
:is(#roros-search, .shop-cart-empty) :is(.roros-search-result--portfolio, .roros-search-result--product) .roros-search-result__img {
  object-fit: contain;
}

:is(#roros-search, .shop-cart-empty) .roros-search-result__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

:is(#roros-search, .shop-cart-empty) .roros-search-result__title {
  font-size: var(--roros-font-size-label);
  font-weight: 500;
  line-height: var(--roros-line-height-label);
}

/* Figma UI/Caption: 13/18 */
:is(#roros-search, .shop-cart-empty) .roros-search-result__meta {
  color: var(--roros-color-text-secondary);
  font-size: var(--roros-font-size-caption);
  line-height: var(--roros-line-height-caption);
}

:is(#roros-search, .shop-cart-empty) .roros-search-result__end {
  flex: none;
  font-size: var(--roros-font-size-body);
  line-height: var(--roros-line-height-body);
  text-align: right;
  white-space: nowrap;
}

/* Rating – components/rating-stars.php (styled in recipes.css), sized to
   Figma "Rating" Small: 67px of stars, value GT Walsheim 12/17, 4px apart */
:is(#roros-search, .shop-cart-empty) .roros-search-result .rating {
  gap: 4px;
  height: 20px;
  margin: 0;
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-micro);
  line-height: var(--roros-line-height-micro);
}

:is(#roros-search, .shop-cart-empty) .roros-search-result :is(ul.stars, ul.stars li, ul.stars li i) {
  /* The icon font draws each star a bit narrower than its size: 5 × 14.5px ≈ 67px */
  font-size: 14.5px;
}

:is(#roros-search, .shop-cart-empty) .roros-search-result .average-rating {
  padding-top: 2px;
}

/* --------------------------------------------------------------------------
   7. No results – "Ingen treff på «…»" and "Mente du …?"
   -------------------------------------------------------------------------- */

#roros-search .roros-search-empty {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

#roros-search .roros-search-empty p {
  margin: 0;
  color: var(--roros-color-text-primary);
  font-family: var(--roros-font-family-ui);
  font-size: var(--roros-font-size-body);
  line-height: var(--roros-line-height-body);
}

#roros-search .roros-search-empty p.roros-search-empty__suggestion {
  color: var(--roros-color-text-secondary);
}

#roros-search .roros-search-empty .roros-search-term {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--roros-color-text-primary);
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   8. Focus
   -------------------------------------------------------------------------- */

#roros-search :is(a, button):focus-visible {
  outline: 2px solid var(--roros-color-border-strong);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   9. Mobile – Figma "Søk – mobil": full screen under the header, no overlay,
   16px sides, 48px input, one column, headings GT Walsheim Medium 18/25,
   "Se alle".
   -------------------------------------------------------------------------- */

@media (max-width: 959px) {
  #roros-search {
    bottom: 0;
    border: 0;
    box-shadow: none;
    clip-path: none;
  }

  #roros-search .roros-search__inner {
    gap: 24px;
    padding: 8px 16px 24px;
  }

  :is(#roros-search, .search-page) .is-search-form {
    height: 48px;
  }

  #roros-search .roros-search-results {
    gap: 24px;
  }

  /* One column: the groups in their own order (order on each group) */
  #roros-search .roros-search-columns {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  #roros-search :is(.roros-search-columns__main, .roros-search-columns__side) {
    display: contents;
  }

  #roros-search .roros-search-group__title {
    font-family: var(--roros-font-family-ui);
    font-size: var(--roros-font-size-label);
    font-weight: 500;
    line-height: var(--roros-line-height-label);
  }

  #roros-search .roros-search-see-all--short .roros-search-see-all__long {
    display: none;
  }

  #roros-search .roros-search-see-all__short {
    display: inline;
  }

  /* Page behind doesn't scroll while the full-screen search is open */
  html.roros-search-open,
  html.roros-search-open body {
    overflow: hidden;
  }
}

@media (min-width: 960px) {
  /* Keep 16px sides when the window is narrower than the 1080px content */
  #roros-search .roros-search__inner {
    width: calc(100% - 32px);
  }
}