/* ==========================================================================
   CAFÉ TRÊS LOBOS — FORMULÁRIOS
   Busca, login, cadastro, checkout, newsletter.
   Regra: fundo claro, borda dourada discreta, foco dourado metálico.
   ========================================================================== */

.ctl-field {
  margin-bottom: var(--ctl-space-2);
}

.ctl-field__label {
  display: block;
  font-size: var(--ctl-fs-xs);
  font-weight: var(--ctl-fw-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ctl-gray-400);
  margin-bottom: 0.4em;
}

.ctl-input,
.ctl-textarea,
.ctl-select {
  width: 100%;
  background: var(--ctl-off-white);
  color: var(--ctl-black-text);
  border: 1px solid rgba(191, 149, 63, 0.35);
  border-radius: var(--ctl-radius-md);
  padding: 0.85em 1.1em;
  font-size: var(--ctl-fs-base);
  transition: border-color var(--ctl-duration-fast) var(--ctl-ease),
              box-shadow var(--ctl-duration-fast) var(--ctl-ease);
}

.ctl-input::placeholder,
.ctl-textarea::placeholder {
  color: #8a8a8a;
}

.ctl-input:focus,
.ctl-textarea:focus,
.ctl-select:focus {
  outline: none;
  border-color: var(--ctl-gold-center);
  box-shadow: 0 0 0 3px rgba(191, 149, 63, 0.2);
}

.ctl-input--error {
  border-color: var(--ctl-error);
}

.ctl-field__error {
  color: var(--ctl-error);
  font-size: var(--ctl-fs-xs);
  margin-top: 0.3em;
}

/* ---------- Busca ---------- */
.ctl-search {
  position: relative;
  display: flex;
  align-items: center;
}

.ctl-search .ctl-input {
  padding-right: 2.8em;
  border-radius: var(--ctl-radius-pill);
}

.ctl-search__submit {
  position: absolute;
  right: 0.4em;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;
  color: var(--ctl-gold-center);
}

.ctl-search__submit:hover {
  background: rgba(191, 149, 63, 0.15);
}

/* ---------- Checkbox / Radio customizado (LGPD, newsletter opt-in) ---------- */
.ctl-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  font-size: var(--ctl-fs-sm);
  color: var(--ctl-gray-400);
}

.ctl-checkbox input[type="checkbox"] {
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  flex-shrink: 0;
  border: 1px solid var(--ctl-gold-center);
  border-radius: 4px;
  margin-top: 0.15em;
  position: relative;
  cursor: pointer;
}

.ctl-checkbox input[type="checkbox"]:checked {
  background: var(--ctl-gold-gradient-135);
}

.ctl-checkbox input[type="checkbox"]:checked::after {
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8em;
  color: var(--ctl-black-text);
}

/* ---------- Formulário sobre fundo escuro (ex: newsletter no rodapé) ---------- */
.ctl-form--dark .ctl-input,
.ctl-form--dark .ctl-textarea {
  background: var(--ctl-bg-elevated);
  color: var(--ctl-white);
  border-color: rgba(191, 149, 63, 0.3);
}

.ctl-form--dark .ctl-input::placeholder {
  color: var(--ctl-gray-400);
}