/* Modern Form/Input Components Styles */
.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

input[type='text'],
input[type='email'],
input[type='password'],
.custom-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--input-border, #bdbdbd);
  border-radius: 0.5rem;
  font-size: 1rem;
  background: var(--input-bg, #fff);
  color: var(--input-fg, #222);
  transition: border-color 0.2s;
  box-sizing: border-box;
}

input:focus,
.custom-input:focus {
  border-color: var(--input-focus, #1a73e8);
  outline: none;
}

.custom-button {
  display: inline-block;
  padding: 0.75rem 1.5rem;
  background: var(--btn-bg, #1a73e8);
  color: var(--btn-fg, #fff);
  border: none;
  border-radius: 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.custom-button:hover,
.custom-button:focus {
  background: var(--btn-hover, #1558b0);
}

/* Error state */
input[aria-invalid='true'],
.custom-input[aria-invalid='true'] {
  border-color: #e53935;
}

.input-error {
  color: #e53935;
  font-size: 0.95rem;
  margin-top: 0.25rem;
}