/*
 * Form controls for the public site: text input, textarea, select, search field, helper text, field error.
 * Every control is >= 48 px tall and has a real <label>. Fields are white with a strong border
 * (--md-color-border, 3.1:1 on white); do not place them on the alternate surface without the white fill.
 *
 *   <div class="c-field">
 *     <label class="c-field__label" for="nombre">Nombre del negocio</label>
 *     <input class="c-input" id="nombre" name="nombre" autocomplete="organization" aria-describedby="nombre-ayuda">
 *     <p class="c-field__help" id="nombre-ayuda">Como lo conoce la gente del barrio.</p>
 *   </div>
 *
 *   Invalid: add .c-field--invalid, aria-invalid="true" on the control, and the error under it:
 *   <p class="c-field__error" id="nombre-error" role="alert">Escribe el nombre de tu negocio.</p>
 *   (aria-describedby on the control lists both the help and the error ids)
 *
 *   Select: <div class="c-select"><select class="c-input" id="comuna">...</select></div>
 *   Search: <form class="c-search" role="search" method="get" action="/vitrina/">
 *             <label class="u-visually-hidden" for="q">Buscar</label>
 *             <input class="c-search__input" id="q" name="q" type="search" enterkeyhint="search" placeholder="Barbería, fritos, taller…">
 *             <button class="c-button c-button--primary c-search__submit" type="submit">Buscar</button>
 *           </form>
 */
.c-field {
  display: flex;
  flex-direction: column;
  gap: var(--md-space-2);
}

.c-field__label {
  font-weight: var(--md-weight-bold);
  line-height: var(--md-leading-snug);
}

.c-field__help {
  font-size: var(--md-font-size-sm);
  color: var(--md-color-ink-soft);
}

.c-field__error {
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  color: var(--md-color-danger);
}

.c-input {
  inline-size: 100%;
  min-block-size: var(--md-target);
  padding: var(--md-space-2) var(--md-space-4);
  border: var(--md-border-width-strong) solid var(--md-color-border);
  border-radius: var(--md-radius-md);
  background: var(--md-color-surface);
  color: var(--md-color-ink);
  font-family: var(--md-font-family);
  font-size: var(--md-font-size-base);
  line-height: var(--md-leading-snug);
  appearance: none;
}

.c-input::placeholder {
  color: var(--md-color-ink-soft);
  opacity: 1;
}

@media (hover: hover) {
  .c-input:hover {
    border-color: var(--md-color-ink-soft);
  }
}

.c-input:focus-visible {
  border-color: var(--md-color-primary);
  outline: var(--md-focus-width) solid var(--md-color-primary);
  outline-offset: var(--md-focus-offset);
}

textarea.c-input {
  min-block-size: 7.5rem;
  resize: vertical;
}

.c-input:disabled {
  background: var(--md-color-surface-alt);
  color: var(--md-color-ink-soft);
  border-color: var(--md-color-divider);
  cursor: not-allowed;
}

.c-field--invalid .c-input,
.c-input[aria-invalid='true'] {
  border-color: var(--md-color-danger);
}

/* Select: the native control with a drawn chevron (two strokes, no data-URI colors). */
.c-select {
  position: relative;
}

.c-select .c-input {
  padding-inline-end: var(--md-space-7);
  cursor: pointer;
}

.c-select::after {
  content: '';
  position: absolute;
  inset-inline-end: var(--md-space-4);
  inset-block-start: 50%;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  margin-block-start: -0.5rem;
  border-inline-end: var(--md-border-width-strong) solid var(--md-color-primary);
  border-block-end: var(--md-border-width-strong) solid var(--md-color-primary);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Search field: one pill holding the input and its button. */
.c-search {
  display: flex;
  align-items: center;
  gap: var(--md-space-2);
  padding: var(--md-space-1);
  padding-inline-start: var(--md-space-4);
  border: var(--md-border-width-strong) solid var(--md-color-border);
  border-radius: var(--md-radius-full);
  background: var(--md-color-surface);
}

.c-search:focus-within {
  border-color: var(--md-color-primary);
  outline: var(--md-focus-width) solid var(--md-color-primary);
  outline-offset: var(--md-focus-offset);
}

.c-search__input {
  flex: 1;
  min-inline-size: 0;
  min-block-size: var(--md-target);
  border: 0;
  background: transparent;
  color: var(--md-color-ink);
  font-size: var(--md-font-size-base);
}

.c-search__input::placeholder {
  color: var(--md-color-ink-soft);
  opacity: 1;
}

/* The pill itself shows the focus ring; the bare input inside shows none. */
.c-search__input:focus-visible {
  outline: none;
}

.c-search__submit {
  flex: none;
}

/* On a phone the search button shows only its icon when .c-search--compact is set. */
.c-search--compact .c-search__submit {
  padding: 0;
  inline-size: var(--md-target);
}

.c-search--compact .c-search__label {
  display: none;
}