/*
 * Add these to your primary CSS file, e.g., resources/css/app.css
 */

:root {
  --rnrfit-blue: #1F407B;
  --rnrfit-red: #E53935;
  --rnrfit-white: #FFFFFF;
}

body {
  background-color: #f8fafc; /* Or use var(--rnrfit-white) if you prefer */
}

/* You can wrap your registration form in a container with this class */
.registration-form-container {
  margin-top: 2rem;
  margin-bottom: 2rem;
  padding: 1.5rem;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  border-radius: 0.5rem;
}

/* Reduce margins on form groups to make the form more compact */
.registration-form-container .form-group {
  margin-bottom: 0.75rem;
}

/* Style for the registration button */
.btn-register {
  background-color: var(--rnrfit-blue);
  color: var(--rnrfit-white);
  border: 1px solid var(--rnrfit-blue);
  padding: 0.6rem 1rem;
  font-weight: bold;
}

.btn-register:hover {
  background-color: #1a3566; /* A slightly darker blue for hover */
  color: var(--rnrfit-white);
}

/* Use the brand red for error messages */
.is-invalid {
    border-color: var(--rnrfit-red);
}

.invalid-feedback {
  color: var(--rnrfit-red);
}