@use '../../assets/styles/fonts';

.ff-form-container {
  @extend .fontSm;
  background-color: var(--hover-color);
  border: 1px solid var(--arrows-button-border-color);
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  margin: 0 auto;

  .ff-form-group {
    margin-bottom: 16px;

    .ff-label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }

    input {
      width: 94%;
      padding: 10px;
      border: 1px solid var(--arrows-button-border-color);
      border-radius: 8px;
      &:focus {
        border-color: var(--brand-color);
      }
      &.ff-error {
        border-color: var(--ff-error-light);
      }
    }
    .ff-error {
      color: var(--error-light);
      margin-top: 4px;
    }
  }
  .ff-form-group {
    margin-bottom: 16px;
    .ff-label {
      display: block;
      margin-bottom: 4px;
      font-weight: bold;
    }
    input,
    select {
      width: 94%;
      padding: 10px;
      border: 1px solid var(--arrows-button-border-color);
      border-radius: 8px;
      &:focus {
        border-color: var(--brand-color);
      }
      &.ff-error {
        border-color: var(--ff-error-light); // Ensure red border color
      }
    }
  }
  
  .ff-form-radio-group {
    display: flex; 
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 16px;
    .ff-radio-group-wrapper{
      display: flex;
    }
    .ff-radio-gender {
      display: flex;
      flex-direction: column;
      align-items: center; 

      input[type="radio"] {
        margin-right: 0.5rem;
      }
    }
    .ff-error {
      padding-left: 12px;
      color: var(--error-light);
      margin-top: 4px;
    }
  }
  .ff-button-layout {
    width: 99%;
    display: flex;
    gap: 12px;
    margin-top: 24px;
    button {
      width: 50%;
      background-color: var(--brand-color);
      color: var(--primary-button-text-color);
      border: none;
      border-radius: 8px;
      padding: 10px;
      cursor: pointer;
    }
  }
}