/* .ap-field — labeled form control block (search box, subscribe box, contact form). */

.ap-field {
  display: flex;
  flex-direction: column;
  gap: var(--ap-space-xs);
  text-align: left;
}

.ap-field__label {
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  color: var(--ap-text);
}

.ap-field__input {
  padding: var(--ap-space-sm) var(--ap-space-md);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  background: var(--ap-surface);
  color: var(--ap-text);
  transition: border-color var(--ap-transition), box-shadow var(--ap-transition);
}

.ap-field__input:hover { border-color: var(--ap-text-muted); }
.ap-field__input:focus-visible { outline: none; border-color: var(--ap-primary); box-shadow: var(--ap-focus-ring); }
.ap-field__input:disabled { opacity: var(--ap-disabled-opacity); cursor: not-allowed; }
.ap-field__input[aria-invalid="true"] { border-color: var(--ap-error); }

.ap-field__error {
  font-size: var(--ap-fs-sm);
  color: var(--ap-error);
}

.ap-search {
  display: flex;
  position: relative;
}

.ap-search__input {
  flex: 1;
  width: 100%;
  padding: var(--ap-space-sm) 68px var(--ap-space-sm) var(--ap-space-md);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-lg);
  background: var(--ap-surface-alt);
  color: var(--ap-text);
}

.ap-search__input:focus-visible { outline: none; border-color: var(--ap-primary); box-shadow: var(--ap-focus-ring); }

/* Hide native browser "clear" glyphs — we render our own, consistent one. */
.ap-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.ap-search__clear {
  position: absolute;
  right: 38px;
  top: 50%;
  transform: translateY(-50%);
  display: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  color: var(--ap-text-muted);
  font-size: 0.8rem;
}

.ap-search__input:not(:placeholder-shown) ~ .ap-search__clear { display: inline-flex; }
.ap-search__clear:hover { color: var(--ap-error); background: var(--ap-surface); }
.ap-search__clear:focus-visible { box-shadow: var(--ap-focus-ring); outline: none; }

.ap-search__button {
  position: absolute;
  right: var(--ap-space-xs);
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: var(--ap-text-muted);
}

.ap-search__button:hover { color: var(--ap-text-inverse); background: var(--ap-primary); }
.ap-search__button:focus-visible { box-shadow: var(--ap-focus-ring); outline: none; border-radius: var(--ap-radius-sm); }

.ap-search__results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: var(--ap-space-xs);
  background: var(--ap-surface);
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-md);
  box-shadow: var(--ap-shadow-md);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 100;
  padding: var(--ap-space-xs);
}

.ap-search-result {
  display: flex;
  align-items: center;
  gap: var(--ap-space-sm);
  padding: var(--ap-space-sm);
  border-radius: var(--ap-radius-sm);
  color: var(--ap-text);
}

.ap-search-result:hover,
.ap-search-result:focus-visible {
  background: var(--ap-surface-alt);
  outline: none;
}

.ap-search-result__name {
  flex: 1;
  min-width: 0;
  font-size: var(--ap-fs-sm);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ap-search-result__match {
  background: none;
  color: var(--ap-primary);
  font-weight: 800;
}

.ap-search-result__empty {
  padding: var(--ap-space-md);
  text-align: center;
  font-size: var(--ap-fs-sm);
  color: var(--ap-text-muted);
}

/* Group headings ("Stores", "Categories", "Blog", "Deals") inside the live search dropdown. */
.ap-search-result__group-label {
  padding: var(--ap-space-sm) var(--ap-space-sm) 2px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ap-text-muted);
}

.ap-search-result__group-label:first-child {
  padding-top: var(--ap-space-xs);
}

/* Fallback icon for result types that aren't a store (no logo to show). */
.ap-search-result__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ap-surface-alt);
  color: var(--ap-primary);
  flex-shrink: 0;
  font-size: 0.8rem;
}

/* Discount badge on a deal result, pinned to the end of the row. */
.ap-search-result__badge {
  margin-left: auto;
  padding-left: var(--ap-space-sm);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--ap-primary);
  background: var(--ap-surface-alt);
  padding-block: 2px;
  padding-inline: 8px;
  border-radius: var(--ap-radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
}