/* Form Container */
.form-group {
    background-color: #3F3F3E; /* Light gray */
    font-size: 20px;
    color: #ffffff;
    padding: 25px;
    border-radius: 15px;
    max-width: 800px;
    margin: 40px auto;  /*Centers the form horizontally */
    /*text-align: center;  Centers text inside */
    text-align: left;
}

.form-group form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group label {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 50px; /* space between fields */
}

.form-group h1,
.form-group h2,
.form-group h3,
.form-group h4,
.form-group h5,
.form-group h6 {
    color: #ffffff; /* change to any color you want */
}

/* Input Fields */
.form-group input,
.form-group textarea{
    color: #000000;  /*Text color inside select */
    /* background-color: #636362;  Matches the form background */
    border: 1px solid #ccc;   
    width: 100%;
    padding: 10px;
    margin: 0 auto 15px auto; /* Center inputs */
    border-radius: 8px;
    font-size: 20px;
    display: block;
}

/* Select Boxes */
.form-group select {
    width: 100%;
    /*max-width: 500px;*/
    padding: 0px 5px;
    height: 35px; /* taller so text is fully visible */
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 20px;
    /* color: #ffffff;  white text */
    /* background-color: #636362;  dark gray background */
    display: block;
    
    -webkit-appearance: none;  /* remove default arrow styling on Safari/Chrome */
    -moz-appearance: none;     /* remove default arrow styling on Firefox */
    appearance: none;           /* remove default arrow styling on modern browsers */
    margin-bottom: 50px; /* space between fields */
}

/* Submit Button */
.btn-primary,
input[type="submit"] {
    background-color: #e10600; /* Red */
    color: #0f0f0f;
    padding: 12px 20px;
    border: none;
    border-radius: 10px; /* Rounded button */
    cursor: pointer;
    font-size: 16px;
    transition: 0.3s ease;
    display: block;
    margin: 20px auto; /* Centers button */
}

/* Button Hover Effect */
.btn-primary:hover,
input[type="submit"]:hover {
    background-color: #b30000;
}

/* Checkbox Container */
.checkbox-container {
    text-align: left; /* Align content inside div */
}

.checkbox-container label {
    display: flex;
    align-items: center;  /*vertically place checkbox with text to left*/
    justify-content: flex-start; /* aligns checkbox + text to the left */
    gap: 8px;  /*space between checkbox and text */
    cursor: pointer; /* makes the whole label clickable */
}

.checkbox-container input[type="checkbox"] {
    width: 25px;
    height: 25px;
    accent-color: #e10600; /* makes the checkbox red like your button */
    margin: 0;  /*spacing between checkbox and text */
    /*vertical-align: middle;  aligns checkbox with text */
}