/*
--------------------------------------
Containers
--------------------------------------
*/

#wrapper .wrapper__inner {
  position  : relative;
  width     : 100%;
  max-width : var(--container-primary-max-width);
  margin    : 0 auto;
  padding   : 2rem 0;
}

#main {
  max-width       : 100%;
  min-height      : 80vh;
  display         : flex;
  flex-direction  : column;
  justify-content : center;
  align-items     : center;
  padding         : 2rem 0;
  margin          : 0 auto;
}

#main > * {
  width  : 100%;
  margin : 0;
}

#content {
  background    : var(--color-white-default);
  border-radius : 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow    : 0 2px 8px rgba(0, 0, 0, 0.06);
  padding       : 2.5rem;
}

/*
--------------------------------------
Page Header
--------------------------------------
*/

.page-header {
  text-align    : center;
  margin-bottom : 2rem;
}

.page-header h1 {
  font-size      : 1.75rem;
  line-height    : 1;
  font-weight    : 700;
  color          : var(--color-black-default);
  text-transform : initial;
  letter-spacing : 0.5px;
  margin         : 0;
  background     : var(--color-white-default);
  border-radius  : var(--radius-lg) var(--radius-lg) 0 0;
  padding        : 1.5rem 1rem;
}

/*
--------------------------------------
Form
--------------------------------------
*/

.register-form {
  margin-bottom : 2rem;
}

.register-form .form-group {
  margin-bottom : 1.25rem;
}

.register-form .form-group-row {
  margin-bottom : 1.25rem;
}

.register-form .form-control-label {
  display       : block;
  font-size     : 0.875rem;
  font-weight   : 600;
  color         : var(--color-black-default);
  margin-bottom : 0.5rem;
}

.register-form .form-control-label.required::after {
  content     : "*";
  color       : var(--color-primary);
  margin-left : 4px;
}

.register-form .form-control {
  width         : 100%;
  padding       : 0.75rem 1rem;
  font-size     : 0.9375rem;
  border        : 1px solid var(--input-border-color);
  border-radius : var(--radius-md);
  background    : var(--color-white-default);
  color         : var(--color-black-default);
  transition    : all 0.2s ease;
}

.register-form .form-control:focus {
  outline      : none;
  border-color : var(--color-primary);
  box-shadow   : 0 0 0 3px var(--color-primary-20);
}

.register-form .form-control::placeholder {
  color : var(--color-grey-font-default);
}

.register-form select.form-control {
  appearance          : none;
  background-image    : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23516765' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat   : no-repeat;
  background-position : right 1rem center;
  padding-right       : 2.5rem;
}

.register-form .input-group {
  position : relative;
  display  : flex;
  width    : 100%;
}

.register-form .input-group .form-control {
  border-radius : var(--radius-md) 0 0 var(--radius-md);
  flex          : 1;
}

.register-form .input-group-btn {
  position : relative;
}

.register-form .input-group-btn .btn {
  height        : 100%;
  padding       : 0 1rem;
  background    : var(--color-grey-default);
  border        : 1px solid var(--input-border-color);
  border-left   : none;
  border-radius : 0 var(--radius-md) var(--radius-md) 0;
  font-size     : 0.8125rem;
  transition    : all 0.2s ease;
}

.register-form .input-group-btn .btn:hover {
  background : var(--color-primary-10);
  color      : var(--color-primary);
}

.register-form p {
  font-size     : 0.875rem;
  color         : var(--color-grey-font-default);
  line-height   : 1.6;
  margin-bottom : 1rem;
}

.register-form p a {
  color           : var(--color-primary);
  text-decoration : none;
  font-weight     : 500;
  transition      : all 0.2s ease;
}

.register-form p a:hover {
  color           : var(--color-primary-40);
  text-decoration : underline;
}

.register-form .custom-checkbox {
  display     : flex;
  align-items : flex-start;
  gap         : 0.75rem;
}

.register-form .custom-checkbox input[type="checkbox"] {
  width        : 18px;
  height       : 18px;
  margin-top   : 2px;
  accent-color : var(--color-primary);
}

.register-form .custom-checkbox label {
  font-size   : 0.875rem;
  color       : var(--color-grey-font-default);
  line-height : 1.5;
}

.register-form .custom-checkbox label a {
  color           : var(--color-primary);
  font-weight     : 500;
  text-decoration : none;
}

.register-form .custom-checkbox label a:hover {
  text-decoration : underline;
}

/*
--------------------------------------
Form Footer & Buttons
--------------------------------------
*/

.register-form .form-footer {
  text-align : center;
  margin-top : 1.5rem;
}

.register-form .form-footer .btn-primary {
  display         : inline-flex;
  align-items     : center;
  justify-content : center;
  width           : 100%;
  padding         : 1rem 2rem;
  font-size       : 0.9375rem;
  font-weight     : 600;
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
  background      : var(--color-primary);
  border          : 2px solid var(--color-primary);
  border-radius   : var(--radius-md);
  color           : var(--color-white-default);
  cursor          : pointer;
  transition      : all 0.2s ease;
}

.register-form .form-footer .btn-primary:hover {
  background   : var(--color-primary-40);
  border-color : var(--color-primary-40);
  box-shadow   : 0 10px 30px rgba(0, 0, 0, 0.25);
  transform    : translateY(-2px);
}

/*
--------------------------------------
Divider
--------------------------------------
*/

.register-form + hr {
  border     : none;
  height     : 1px;
  background : var(--color-grey-default);
  margin     : 2rem 0;
}

/*
--------------------------------------
No Account
--------------------------------------
*/

.no-account {
  text-align : center;
}

.no-account .btn-secondary {
  display         : inline-flex;
  justify-content : center;
  align-items     : center;
  width           : 100%;
  padding         : 1rem 2rem;
  font-size       : 0.9375rem;
  font-weight     : 600;
  text-transform  : uppercase;
  letter-spacing  : 0.5px;
  background      : transparent;
  border          : 2px solid var(--color-black-default);
  border-radius   : var(--radius-md);
  color           : var(--color-black-default);
  cursor          : pointer;
  transition      : all 0.2s ease;
}

.no-account .btn-secondary:hover {
  background : var(--color-black-default);
  color      : var(--color-white-default);
}

/*
--------------------------------------
Page footer
--------------------------------------
*/

footer.page-footer {
  background : transparent;
  padding    : 1rem 0;
  text-align : center;
}

/*
--------------------------------------
Responsive
--------------------------------------
*/

@media (max-width : 575px) {
  #content {
    padding : 1.5rem;
  }

  .page-header h1 {
    font-size : 1.375rem;
  }

  .register-form .form-footer .btn-primary,
  .no-account .btn-secondary {
    padding : 0.875rem 1.5rem;
  }
}