/* Form component styles */

/* Base form inputs */
input[type="text"], 
input[type="email"], 
input[type="password"] {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-size-large);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-bottom: var(--spacing-md);
}

select {
  width: 100%;
  padding: 12px 16px;
  font-size: var(--font-size-large);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--border-color);
  box-sizing: border-box;
  margin-bottom: var(--spacing-md);
}

textarea {
  font-size: var(--font-size-base);
}

/* Responsive input styling */
.responsive-input {
  width: 100%;
  max-width: 150px;
  box-sizing: border-box;
}

.input-note {
  font-size: 0.8em;
  margin-left: var(--spacing-xs);
}

/* Checkbox styling */
input[type="checkbox"] {
  width: 20px;
  height: 20px;
  transform: scale(1.5);
  margin-right: 8px;
}

/* Player fields for group creation */
.player-fields {
  margin-bottom: var(--spacing-sm);
}

.player-fields input {
  margin-right: var(--spacing-xs);
}

#add-player-btn {
  margin-top: var(--spacing-sm);
}

/* Mobile form adjustments */
@media screen and (max-width: 600px) {
  .responsive-input {
    max-width: 100%;
  }
  
  textarea {
    font-size: var(--font-size-base);
  }
  
  select, 
  input[type="text"], 
  input[type="email"], 
  input[type="password"] {
    height: 48px;
  }
}