/**
 * @file
 * Homepage Primo search — inline scope dropdown.
 *
 * Positions the scope <select> inside the search bar, between the text
 * input and the search button. The theme already applies appearance:none
 * and a custom SVG arrow on .sns-form-item select — we inherit that and
 * only override sizing/positioning.
 */

/* Extra right padding on input to make room for select + button. */
.sns-form-item--has-scope input[type="text"] {
  padding-right: 230px;
}

/* Position the select absolutely inside the bar, left of the button. */
.sns-form-item--has-scope .sns-homepage-primo-search__scope {
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  /* Override theme defaults for inline fit. */
  display: inline-block;
  width: 170px;
  max-width: 170px;
  height: 32px;
  padding: 0 1.8em 0 0.6em;
  font-size: 0.875rem;
  line-height: 32px;
  /* Transparent bg to blend with white input bar; keep theme's SVG arrow. */
  background-color: transparent;
  border: none;
  border-left: 1px solid #ccd0d9;
  border-radius: 0;
  color: #222B45;
  cursor: pointer;
}

.sns-form-item--has-scope .sns-homepage-primo-search__scope:focus {
  outline: 2px solid #b20303;
  outline-offset: -2px;
}

/* Desktop: button is larger (60px), adjust accordingly. */
@media all and (min-width: 768px) {
  .sns-form-item--has-scope input[type="text"] {
    padding-right: 260px;
  }

  .sns-form-item--has-scope .sns-homepage-primo-search__scope {
    right: 65px;
    width: 180px;
    max-width: 180px;
    height: 38px;
    line-height: 38px;
    font-size: 0.95rem;
  }
}

/* Validation error state. */
.sns-form-item--has-scope input[type="text"].sns-form-item--error {
  border-color: #b20303;
  box-shadow: 0 0 0 1px #b20303;
}

.sns-form-item__error-message {
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  margin-top: 4px;
  font-size: 0.8125rem;
  line-height: 1.3;
  color: #b20303;
}

.sns-form-item__error-message:empty {
  display: none;
}

/* Mobile: stack below input. */
@media all and (max-width: 480px) {
  .sns-form-item--has-scope {
    display: flex;
    flex-wrap: wrap;
  }

  .sns-form-item--has-scope input[type="text"] {
    padding-right: 50px;
  }

  .sns-form-item--has-scope .sns-homepage-primo-search__scope {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    max-width: 100%;
    height: 40px;
    line-height: 40px;
    margin-top: 8px;
    border: 1px solid #ccd0d9;
    border-radius: 4px;
    background-color: #ffffff;
  }
}